JavaScript如何克隆节点并且修改相关属性？

JavaScript如何克隆节点并且修改相关属性？

前两天用JavaScript做了一个效果，感觉棒棒哒，因为之前很少接触js这块，所以做起来花了好长的时间，今天空闲了，我就将代码贴下来，供小菜鸟们学习交流。效果如下图，点击+，添加一行，点击-，减少一行。

代码如下：

<div class='' id = 'attr_pipei_0'>
    <a href='javascript:;' id='a0' onclick='addSpec_pipei(this)' >[+]</a>
    <a href='javascript:;' id='b0' onclick='removeSpec_pipei(this)' style='display: none;'>[-]</a>
    <span  id='c0' >This is the 0 line!</span>
</div>
 
<script>
    function addSpec_pipei(obj)
  {
      var sourceNode = document.getElementById("attr_pipei_0"); // 获得被克隆的节点对象
      var clonedNode = sourceNode.cloneNode(true); // 克隆节点
      var i = 0;
      for(i = 1;i<=1000;i++){
              var idi = document.getElementById("attr_pipei_"+i);
          if(idi == null){
              clonedNode.setAttribute("id", "attr_pipei_"+i); // 修改一下id 值，避免id 重复
              var va = clonedNode.childNodes;
              va[1].setAttribute("id", "a"+i); // 修改一下+号id 值，避免id 重复
              va[3].setAttribute("id", "b"+i); // 修改一下-号id 值，避免id 重复
              va[5].setAttribute("id", "c"+i); // 修改一下span的id 值，避免id 重复
 
              sourceNode.parentNode.appendChild(clonedNode); // 在父节点插入克隆的节点
              va[1].style.display="none";//隐藏
              va[3].style.display="inline-block";//显示
              break;
          }
      }
            var a = document.getElementById("c"+i);
            a.innerHTML = "This is the "+i+" line!"; // 修改一下内容
  }
 
  function removeSpec_pipei(obj)
  {
 var p= obj.parentNode;
     if(p){
         p.remove();
     }
  }
</script>

代码贴上了，菜鸟们还不快点分享给其他菜鸟~~
注意：如果在显示中文内容时候出现乱码，自行在网上搜索JS怎么处理中文出现乱码问题！

JavaScript如何克隆节点并且修改相关属性？

注：本文转载自JavaScript,克隆节点，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除。