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

代码

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>

循环不会将创建的元素附加到最后一个附加的元素，而是将创建的"div"添加到循环中循环1创建的元素中，如下所示：

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

我错过了什么？

通过使用.children()，您将只在第一次迭代后的每次迭代中获得即时div，从而产生

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

因为.孩子只看孩子，而不是所有的后代。您想要的是.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功能，因为它内置了子附加：

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>

_{需要注意的是，Chrome 45+、Firefox 22.0+、Edge和Opera都有箭头功能。它们在IE或Safari中不起作用。或者，如果您有一个transpiler（如babel）}

，它们就会工作

相关内容

最新更新

热门标签：