gpt4 book ai didi

javascript - onclick 复制一个 div 但将 div 放在某个位置

转载 作者:行者123 更新时间:2023-12-03 11:02:10 28 4
gpt4 key购买 nike

当我按下某个按钮时,我试图复制一个div,除了div被添加到的地方之外,我一切正常。它位于我的页面底部,位于页脚上方,我希望它位于

 document.getElementById('and-button').onclick = duplicate;

var i = 0;
var original = document.getElementById('filter');

function duplicate() {
var clone = original.cloneNode(true);
clone.id = "filter" + ++i;
original.parentNode.appendChild(clone);
}

HTML:

  <!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
other content etc
</div>

<a href=#! id="filter">
some content
</a>

/*here is where i would like my duplicated div to go*/

<div class="filter-nav">
<input type="button" onclick="" value="AND" id="and-button">
<input type="button" onclick="" value="OR" id="or-button">
</div>

<div>
other content etc
</div>

/*here is where it is going*/

<footer>
footer content
</footer>
</body>
</html>

最佳答案

为下一个节点添加一个id并使用insert before来保存乘法

document.getElementById('and-button').onclick = duplicate;

var i = 0;
var original = document.getElementById('filter');
var beforeElem = document.getElementById('filter-nav');
function duplicate() {
var clone = original.cloneNode(true);
clone.id = "filter" + ++i;
original.parentNode.insertBefore(clone, beforeElem);
}
<div>
other content etc
</div>

<a href=#! id="filter">
some content
</a>

/*here is where i would like my duplicated div to go*/

<div class="filter-nav" id="filter-nav">
<input type="button" onclick="" value="AND" id="and-button">
<input type="button" onclick="" value="OR" id="or-button">
</div>

<div>
other content etc
</div>

/*here is where it is going*/

<footer>
footer content
</footer>

关于javascript - onclick 复制一个 div 但将 div 放在某个位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28036354/

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