如何使用js动态生成html代码

JavaScript014

如何使用js动态生成html代码,第1张

所谓动态生成html代码就是源文件代码中原来没有内容或者需要重新改变此处的要显示的文字或内容，需要用JavaScript代码来实现。动态生成是一种很常见常用的方法。

用innerHTML写入html代码：

<div id="zd"></div>

‘即为向id为zd的标签写入内容

<script>document.getElementById("zd").innerHTML="这里即为要写入的代码"</script>

说明：

innerHTML：向对象插入内容。

获得JS生成后的HTML代码，首先需要要获取的是那一段代码，然后在通过innerHTML这个JS的方法来调用，然后在输出这段方法就行了；

代码：

<html>

<head></head>

<script>

var oDiv = document.getElementById('div1')

alert(oDiv.innerHTML)

</script>

<body>

<div id='div1'>

<p>会被获取的</p>

</div>

/body>

</html>

这样就能获取到JS生成后的html代码。

拿到你的页面元素，使用append，appendTo，prepend或prependTo

prepend() 语法：$(selector).prepend(content) 或 $(selector).prepend(function(index,html))

prependTo() 语法：$(content).prependTo(selector)

提示：prepend() 和 prependTo() 方法作用相同。

差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

append() 语法：$(selector).append(content)

appendTo() 语法：$(content).appendTo(selector)