Question

我想在我的网页中使用以下功能： -

单击添加按钮时，应将整个div附加到跨度。为了达到这个目的，我尝试了以下方法，但它似乎没有起作用。请解释为什么以及如何完成这项工作。

<html>
<head>
  <script type="text/javascript">
     function add()
     {
        var details=document.getElementById('education');
        var eachDetail=document.getElementById('fdetails_edu_div');
        alert(details.getAttribute('id'));
        alert(eachDetail.getAttribute('id'));
        var x=details.appendChild(eachDetail);
        alert(x);
     }

  </script>
</head>
<body>
<span id="education">
<div id="fdetails_edu_div">
 <label>EDUCATIONAL QUALIFICATION
   <span class="small">Click on 'ADD' to add more qualifiaction details</span>
 </label>
 <button type="button" name="addqualifiaction" onclick="add()">ADD</button> 
 <br>
 <br>
 <br>
 <label>Degree
   <span class="small">School/Board</span>
 </label>
 <p>
   <input type="text" name="school_board" id="fdegree" size="30" maxlength="30" value="none"   class="fprjtit"/>
 </p>
 <br>
 <br>
 <br>
 <label>Year
   <span class="small">Year of Passing</span>
 </label>
 <p>
   <input type="text" name="pass_year" id="fdegree" size="30" maxlength="30" value="none" class="fprjtit"/>
 </p>
 <br>
 <br>
 <br>
 <label>Max Marks
   <span class="small">maximum marks</span>
 </label>
 <p>
   <input type="text" name="max_marks" id="fdegree" size="30" maxlength="30" value="none" class="fprjtit"/>
 </p>
</div>
</span>
</body>
</html>

现在，当我点击添加按钮时，ID为“fdetails_edu_div”的div应该作为子项附加，最好添加到id为“education”的span的底部。

以下是什么问题以及如何纠正？

Answer 1

我认为您需要克隆ID为fdetails_edu_div

的div

使用以下代码

var x = 1;

function add() {
    var container = document.getElementById('education');
    var detail = document.getElementById('fdetails_edu_div');
    var clone = detail.cloneNode(true);
    clone.id = "fdetails_edu_div" + x;
    x++;
    container.appendChild(clone);

}

注意，我为新创建的div创建了一个新的id。

另请注意，我已从div Add中移除fdetails_edu_div按钮并将其放在外面（您不希望重复按钮重复，是吗？）

见工作fiddle

Answer 2

appendChild（）的用法是将元素从一个元素移动到另一个元素check this。

根据您的代码，您将'eachDetail'移至'details'，但'eachDetail'已经存在。它就像你删除'eachDetail'然后再在'详细信息'中添加它一样，所以没有任何反应。

您可以将'详细信息'替换为另一个元素，即新范围。

Answer 3

试试此代码

 function add()
 {
    var arr = [];
    var n = 0;
    var details=document.getElementById('education');
    var eachDetail=document.getElementById('fdetails_edu_div');
    alert(details.getAttribute('id'));
    alert(eachDetail.getAttribute('id'));
    node = document.getElementById("fdetails_edu_div");
    while (node.firstChild) {
        arr[n++] = node.firstChild;
        node.removeChild(node.firstChild);
    }
    for(var i = 0; i < n; ++i) {
        details.appendChild(arr[i]);
    }
    alert(eachDetail.parentNode.getAttribute('id'));
 }

上面的代码首先删除id为fdetails_edu_div的div的子节点，暂时保存它们，然后将它们附加到具有id education的span。你可以通过alert（eachDetail.parentNode.getAttribute（'id'））来检查这个;

使用javascript DOM添加动态内容

3 个答案: