gpt4 book ai didi

javascript - 使用 javascript DOM 添加动态内容

转载 作者:行者123 更新时间:2023-11-30 17:52:25 25 4
gpt4 key购买 nike

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

单击添加按钮时,整个 div 应附加到 span。为了实现这一点,我尝试了以下方法,但它似乎没有用。请解释为什么以及我怎样才能完成这项工作。

<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 的底部,最好附加到底部。

下面有什么问题,如何更正?

最佳答案

我认为您需要克隆 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 fdetails_edu_div 中删除了 Add 按钮并将其放在外面(您不想重复添加按钮,是吗? )

查看工作 fiddle

关于javascript - 使用 javascript DOM 添加动态内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18712787/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com