[英]javascript : my appendChild only works once
我有一个<div id="incontent"></div>
,我在其中使用 javascript 生成元素...这是我的脚本:
var lastId = 0; // initialise ID
function MyFunction( var1, var2, var3) {
const incontent = document.getElementById('incontent');
incontent.innerHTML+= var1 + var2 + (var3 ? ' (var3=' + var3 + ')' : '');
if (var3 === 'descforalink') {
incontent.innerHTML += `<div class="contentLink"><p>a link</p></div></div>`;
}
}
//manages the click on possible
document.getElementById('incontent').addEventListener('click', function (e) {
lastId++ ; // for a different ID
});
// element in which to instantiate the contentDATA for another rendering...
const contentDATA = document.getElementById('contentDATA');
// contentDATA content is received
contentDATA.addEventListener(MyMouv.Descperso, ({ data }) => {
var divques1 = '<div class="contentDesc col-12"><p>';
var divques2 = '</p>';
var divques3 = '</div>';
var contentallbtns = '';
var contentbtnsbefore = '<div class="col-12 contentLink">';
var contentbtnsafter = '</div></div>';
MyFunction('', divques1 + data.text + divques2 , data.var3, divques3);
// if actions buttons/links
if (data.actions) {
var btns = '';
for (var i = 0; i < data.actions.length; i++) { if (i> 0) {btns += ' ';}
let act = data.actions[i];
btns += '<a class="mybtn"' + ' data-val="' + act.value + '">' + act.title + '</a>';
contentallbtns = contentbtnsbefore + btns + contentbtnsafter;
}
MyFunction('',contentallbtns);
}
//building tags
var startB = document.createElement('section');
var myiddesc = 'iddesc-'+lastId ;
startB.setAttribute('id', myiddesc );
startB.setAttribute('class', 'thesection');
document.getElementById('incontent').appendChild(startB);
var startB2 = document.createElement('div');
startB2.setAttribute('class', 'container');
startB.appendChild(startB2);
var startB3 = document.createElement('div');
startB3.setAttribute('class', 'row MyRow');
startB2.appendChild(startB3);
document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentDesc'));
document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentLink'));
});
这将第一次生成这种类型的结构:
<section id="iddesc-0" class="thesection">
<div class="container">
<div class="row MyRow">
<div class="contentDesc">
<p>Hello World</p>(var3=descforalink)
</div>
<div class="contentLink">
<p>a link</p>
</div>
</div>
</div>
</section>
这就是我想要的......但是当另一个部分被创建时,会出现这个结构:
<section id="iddesc-0" class="thesection">
<div class="container">
<div class="row MyRow">
<div class="contentDesc">
<p>Hello World</p>(var3=descforalink)
</div>
<div class="contentLink">
<p>a link</p>
</div>
</div>
</div>
</section>
<div class="contentDesc">
<p>Hello World</p>(var3=descforalink)
</div>
<div class="contentLink">
<a class="mybtn" data-val="banana">banana</a><a class="mybtn" data-val="orange">orange</a>
</div>
<section id="iddesc-1" class="thesection">
<div class="container">
<div class="row MyRow">
</div>
</div>
</section>
所以document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentDesc')); document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentLink'));
appendchild()
document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentDesc')); document.querySelector('div.MyRow').appendChild(document.querySelector('div.contentLink'));
只能工作一次......我该如何改变它? 总是将我的 div div class="contentDesc"
和class="contentLink"
放在 div class="row MyRow"
中? 谢谢您的帮助...
如果您在 DOM 中已经存在的元素上使用appendChild
,它会将元素从它所在的位置移动到新位置。 它不会复制它。
如果要制作副本,然后 append 复制,请使用cloneNode(true)
:
document.querySelector('div.MyRow').appendChild(
document.querySelector('div.contentDesc').cloneNode(true)
);
document.querySelector('div.MyRow').appendChild(
document.querySelector('div.contentLink').cloneNode(true)
);
但是,我不确定你真的想这样做。 您正在创建一个引用startB
的新部分,但是您没有将startB
附加到任何内容。 也许您的意思是 append 它而不是上述之一。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.