代码
JavaScript:
var recurringF = (function(){
this.$el = $("#target");
this.arg = arguments[0];
this.spl = (!_.isEmpty(this.arg)) ? this.arg.split(" ") : false;
if(this.spl){
for(var i=0;i<this.spl.length;i++){
if(i===0){
this.$el.append(document.createElement(this.spl[i]));
}else{
this.$el.children().last().append(document.createElement(this.spl[i]));
}
}
}
return {
"$":this.$el
}
});
var t = new recurringF("div h1 span");
HTML 正文:
<body>
<div id="target"></div>
</body>
目标
我想将元素按顺序追加到父元素 $("#target") 中，以便 HTML 中的最终结果如下:
<body>
<div id="target">
<div>
<h1>
<span></span>
</h1>
</div>
</div>
</body>
循环不会将创建的元素附加到最后附加的元素，而是附加到循环周期 1 创建的元素“div”，如下所示:
<div id="target">
<div>
<h1></h1>
<span></span>
</div>
</div>
我错过了什么？
最佳答案
通过使用 .children()，您只会在第一次迭代之后的每次迭代中获得直接 div，从而导致
<div id="target">
<div>
<h1></h1>
<span></span>
<alltherest></alltherest>
</div>
</div>
因为.children只查看 child ，而不是所有后代。您想要的是 .find(*) ，这样它将在每次迭代中获得最深的嵌套后代。
this.$el.find('*').last().append(document.createElement(this.spl[i]));
https://jsfiddle.net/f3fb997h/
也就是说，如果您只存储对最后创建的元素的引用并附加到它，而不是每次迭代都重新选择它，那就更好了。
var $tempEl = this.$el, newEl;
if(this.spl){
for(var i=0;i<this.spl.length;i++){
newEl = document.createElement(this.spl[i]);
$tempEl.append(newEl);
$tempEl = $(newEl);
}
}
https://jsfiddle.net/f3fb997h/1/
请注意，此时您并没有真正从 jQuery 中受益，因此只需稍加调整，您就不会依赖它。
var recurringF = (function(){
this.el = document.getElementById('target');
this.arg = arguments[0];
this.spl = (!_.isEmpty(this.arg)) ? this.arg.split(" ") : false;
console.log(this.spl);
var tempEl = this.el, newEl;
if(this.spl){
for(var i=0;i<this.spl.length;i++){
newEl = document.createElement(this.spl[i]);
tempEl.appendChild(newEl);
tempEl = newEl;
}
}
return {
"el":this.el
}
});
关于javascript - 如何按顺序 .append() 创建的元素到先前添加的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36697053/