JavaScript创建、添加、删除、克隆节点

￡神魔★判官ぃ 2023-07-13 03:46 153阅读 0赞 
  1. <body>
  2.     <ul class="ul2"></ul>
  3.     <script type="text/javascript">
  4.          var ul2 = document.querySelector('.ul2')
  5.         console.log(ul2)
  6.         //创建元素节点
  7.         var li21 = document.createElement('li')
  8.         li21.innerHTML = 'li21'
  10.         //添加节点
  11.         ul2.appendChild(li21)
  12.         var li20 = document.createElement('li')
  13.         li20.innerHTML = 'li20'
  14.         ul2.insertBefore(li20, li21)
  15.         //删除节点
  16.         ul2.removeChild(li20)
  17.         document.querySelector('.remove-ul2-li').onclick = function () { 
  18.             if (ul2.children.length == 0) { 
  20.                 this.disabled = true
  21.             } else { 
  22.                 ul2.removeChild(ul2.children[0])
  23.             }
  25.         }
  26.         //克隆节点
  27.         //如果false或空，为浅拷贝，不复制内容，如果为true，为深拷贝，复制内容
  28.         ul2.appendChild(li20.cloneNode(true))
  29.         ul2.appendChild(li20.cloneNode())
  30.     </script>
  32.   </body>

发表评论

表情：
评论列表 （有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读