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>

循环不会将创建的元素追加到最后添加的元素，但是在循环周期1中创建了元素'div'，如下所示：

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

我错过了什么？

Answer 1

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

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

因为.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
   }
});

Answer 2

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

arameter refresh

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

<div class="page-container">
	
		<div class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
				
					<button class="visible-xs navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span> 
						<span class="icon-bar"></span>
					</button>
					
					<a class="navbar-brand" href="#">First Name</a>
				</div>
			</div>
		</div>

				<div class="container-fluid">
					<div class="row row-offcanvas-left">
						<div class="collapse navbar-collapse col-xs-3 sidebar-offcanvas" id="bs-example-navbar-collapse-1">
						
							<ul class="nav nav-stacked navbar-left">
								<li><a href="#">Menu 1 </a></li>
								<li><a href="#">Menu 2</a></li>
								<li><a href="#">Menu 3</a></li>
							</ul>
						</div>
					</div>
				</div>
	</div>

＆＃13;

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
    });
}

＆＃13;

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

＆＃13;

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'));

＆＃13;

_{应该注意的是，箭头功能适用于Chrome 45 +，Firefox 22.0 +，Edge和Opera。它们不适用于IE或Safari。或者，如果您有一个转换器（如babel）}

，它们将会起作用

如何将.append（）创建的元素依次顺序添加到先前添加的元素

2 个答案: