Question

我对div复制有疑问。我创建了一个循环来复制所有答案中的星空系统。但是，当我尝试附加该块并且控制台返回我一个错误函数时。

function insertStarSystem() {
     var targetFaq = document.getElementById('faq');
     var targetPanel = targetFaq.getElementsByClassName('panel');

我定位了div：

    if (targetPanel.length > 0) {
         for (var i = 0; i < targetPanel.length; i++) {
              var star = document.getElementById('star_rating');
              star.style.display = 'inherit';

              $(targetPanel[i]).append(star);
         }
     }
}

这是div“ star_rating”：

<div id="star_rating" class="display">  
            <fieldset id='system_rating' class="rating alert" >
            <input class="stars" type="radio" id="star5" name="Rating5" value="5"/>
            <label class = "full" for="star5" title="Au Top!"></label>
            <input class="stars" type="radio" id="star4" name="rating" value="4"/>
            <label class = "full" for="star4" title="Carrément!"></label>
            <input class="stars" type="radio" id="star3" name="rating" value="3"/>
            <label class = "full" for="star3" title="Presque!"></label>
            <input class="stars" type="radio" id="star2" name="rating" value="2"/>
            <label class = "full" for="star2" title="Un Peu!"></label>
            <input class="stars" type="radio" id="star1" name="rating" value="1"/>
            <label class = "full" for="star1" title="Pas du tout!"></label>
        </div>

您可以在上面的代码中看到，我尝试为所有答案复制star_rating。但是它在最后一个答案中仅返回一个star_system。我在做什么错了？

 <div class="panel panel-primary padding txtLeft">
     <legend>Combien l'installation va-t-elle me coûter ?</legend>
 </div>

我有4个div，我想在每个div中复制系统

Answer 1

您需要使用cloneNode。您没有重复任何操作。我不知道是什么让你觉得自己。

append如果不进行克隆，只会将该元素从父元素移到父元素，而不会对其进行克隆（很明显）。您没想到append会为您神奇地克隆节点，不是吗？这是一个非常基本的DOM方法，它可以完成其声明的工作：

将X附加到Y中。如果X附加到很多地方（在您的情况下是循环的），则始终被移到同一位置X。

固定代码：

if (targetPanel.length > 0) {
     for (var i = 0; i < targetPanel.length; i++) {
          var starClone = document.getElementById('star_rating').cloneNode(true);
          starClone.style.display = 'inherit';

          $(targetPanel[i]).append( starClone );  
     }
 }

如主要评论中所述，您不能拥有一个文档不仅仅是一个唯一的ìd属性，因此您需要获取固定。只需停止使用ìd属性，直到掌握为止。

我也不知道为什么要混合使用jQuery代码和香草代码。.因为您没有在问题中标记jQuery。很奇怪。

JS中的重复DOM节点

1 个答案:

固定代码：