0

我希望在我的网页中具有以下功能：-

单击添加按钮时，应将整个 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”的跨度的底部。

以下有什么问题，如何纠正？

4

3 回答 3

2

I think you need to clone the div with id fdetails_edu_div

Use the following code

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

}

Notice, I create a new id for the newly created div.

Also note, I have removed the Add button from within the div fdetails_edu_div and placed it outside (you don't want the add button to repeat, do you?)

See working fiddle

于 2013-09-10T07:43:38.417 回答
0

appendChild() 的用法是将一个元素从一个元素移动到另一个元素，检查这个。

根据您的代码，您将“eachDetail”移动到“details”，但“eachDetail”已经存在。它就像您删除“eachDetail”然后在“详细信息”中再次添加它一样，所以什么也没有发生。

您可以将“详细信息”替换为另一个元素，即新跨度。

于 2013-09-10T07:47:46.870 回答
0

试试这个代码

 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'));

于 2013-09-10T08:00:36.033 回答