使用JavaScriptDOM添加动态内容_Javascript_Dom_Html_Appendchild

使用JavaScriptDOM添加动态内容

javascript dom html

使用JavaScriptDOM添加动态内容,javascript,dom,html,appendchild,Javascript,Dom,Html,Appendchild,我希望我的网页具有以下功能：- 单击add按钮时，应将整个div追加到跨度中。为了实现这一点，我尝试了下面的方法，但它似乎不起作用。请解释为什么以及如何完成这项工作 <html> <head> <script type="text/javascript"> function add() { var details=document.getElementById('education'); var each

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

单击add按钮时，应将整个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>


函数add（）
{
var details=document.getElementById（'education'）；
var eachDetail=document.getElementById（'fdetails_edu_div'）；
警报（details.getAttribute（'id'））；
警报（eachDetail.getAttribute（'id'）；
var x=details.appendChild（eachDetail）；
警报（x）；
}
学历
单击“添加”以添加更多定性操作详细信息
添加






度
学校/董事会








年
过年








马克斯
最高分数

现在，当我单击add按钮时，id为“fdetails_edu_div”的div应该作为id为“education”的跨度的子级追加，最好是在底部

下面的错误是什么？如何更正？

我认为您需要使用id克隆div

fdetails\u edu\u 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

fdetails\u edu\u div

中删除了

Add

按钮，并将其放置在外部（您不希望Add按钮重复，是吗？）

请参见工作

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

根据您的代码，您将“eachDetail”移动到“details”，但“eachDetail”已经存在。它的工作原理类似于删除“eachDetail”，然后在“details”中再次添加它，因此不会发生任何事情

您可以用另一个元素（新的span）替换“details”。

试试这段代码

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

函数添加（）
{
var-arr=[]；
var n=0；
var details=document.getElementById（'education'）；
var eachDetail=document.getElementById（'fdetails_edu_div'）；
警报（details.getAttribute（'id'））；
警报（eachDetail.getAttribute（'id'）；
node=document.getElementById（“fdetails_edu_div”）；
while（node.firstChild）{
arr[n++]=node.firstChild；
node.removeChild（node.firstChild）；
}
对于（变量i=0；i


上面的代码首先删除id为fdetails_edu_div的div的子节点，暂时保存它们，然后将它们附加到id为span的教育中。您可以使用警报（eachDetail.parentNode.getAttribute（'id'））检查这一点
 首先，不要将
放在
中，因为这不是有效的HTML。第二，fdetails\u edu\u div
在标记中已经是education
的孩子了-它会去哪里？好的，如果我用div替换span标记也可以。div中的div是完全有效的，对吗？是的，fdetails_edu_div是一个接受教育的孩子。我想要的是，点击add按钮应该可以为education添加更多这样的div。您需要创建节点的克隆：克隆似乎是一个不错的选择，但是使用克隆，可以管理克隆元素中不同标记的名称。我的意思是，我还需要处理服务器端的克隆元素。因此，对于每个标记，我希望给它们一个动态生成的唯一名称，比如name1、name2等。如果我添加元素，我可以通过Javascript来管理它。这里也可以吗？当然，一旦克隆的元素被添加到DOM中，您就可以用通常的方式查询和操作它了。也许为了省去一些麻烦，你应该研究一下类似击倒的东西：