js动态追加元素

最新推荐文章于 2023-11-04 11:23:06 发布

weixin_34126557

最新推荐文章于 2023-11-04 11:23:06 发布

阅读量144

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/3680343/blog/1592198

版权

2019独角兽企业重金招聘Python工程师标准>>>

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()

转载于:https://my.oschina.net/u/3680343/blog/1592198