1.innerHTML
<body>
<ul id="ulContent">
<li>这是本身具有的一行,我要在下面追加四行</li>
</ul>
<script type="text/javascript">
var ul=document.getElementById("ulContent");
var li="<li>这是追加的内容</li>";
for(var i=0;i<4;i++){
ul.innerHTML+=li;
}
</script>
</body>
var li="<li>这是追加的内容</li>";
这句话很显然创建的是个字符串。并不是dom节点元素
如果想添加样式,只能像如下
var li="<li style='color:blue'>这是追加的内容</li>";
并不能用
li.style.color="red";这种样式
2.appendChild()
<body>
<ul id="ulContent">
<li>这是本身具有的一行,我要在下面追加四行</li>
</ul>
<script type="text/javascript">
var ul=document.getElementById("ulContent");
// var li="<li>这是追加的内容</li>";
for(var i=0;i<4;i++){
// ul.innerHTML+=li;
var li=document.createElement("li");
li.innerHTML="这是追加的内容";
ul.appendChild(li);
}
</script>
</body>
var li=document.createElement("li");
这里创建的是个dom节点元素
所以可以使用
li.style.color="red";这种样式
appendChild()的方法要比innerHTML灵活的多,推荐使用appendChild()