如何顺序 .append() 创建的元素到先前添加的元素

Question

代码

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>

循环不会将创建的元素追加到最后一个追加的元素，而是追加到in循环循环1创建的元素'div'，如下所示：

    <div id="target">
        <div>
            <h1></h1>
            <span></span>
        </div>
    </div>

我错过了什么？

Answer 1

您可以尝试使用常规 javascript 功能，因为它内置了子附加功能：

const recurseElement = (elementString, target) => {
    const elements = elementString.split(' ');
    elements.forEach(function(ele) {
        const domElement = document.createElement(ele); // create the element
        target.appendChild(domElement); // append to the target
        target = domElement; // this element is the new target
    });
}

所以现在你可以像这样使用它了：

recurseElement('div h1 span', document.getElementById('target'));

const recurseElement = (elementString, target) => {
  const elements = elementString.split(' ');
  elements.forEach(function(ele) {
    const domElement = document.createElement(ele); // create the element
    target.appendChild(domElement); // append to the target
    target = domElement; // this element is the new target
  });
};

recurseElement('div h1 span', document.getElementById('target'));

#target div {
  background: green;
  height: 16px; width: 128px; padding: 10px;
}

#target div h1 {
  background: red;
  height: 16px; width: 64px; padding: 10px;
}

#target div h1 span {
  background: purple; display: block;
  height: 16px; width: 32px; padding: 10px;
}

<div id="target"></div>

_{需要注意的是，Chrome45+、Firefox 22.0+、Edge 和 Opera 都可以使用箭头功能。它们在 IE 或 Safari 中不起作用。或者如果你有一个转译器（比如 babel），它们就会工作}

Answer 2

通过使用 .children()，您只会在第一次迭代后的每次迭代中立即获得 div，从而导致

<div id="target">
  <div>
    <h1></h1>
    <span></span>
    <alltherest></alltherest>
  </div>
</div>

因为.children只看children，不看所有后代。你想要的是 .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
   }
});

如何顺序 .append() 创建的元素到先前添加的元素

How to sequentially .append() created elements to the previously added element

html

javascript

jquery

underscore.js