Question

我试图通过使用document.getElementsByTagName（“div”）将新div元素附加到现有div，将其转换为数组，然后使用appendChild。但是，当我检查这个jsfiddle的帧源时，它似乎没有将它附加到div。它只是：

<body>
  <div id="1">
  <div id="2">
    test
  </div>
</div>

而不是预期的结果：

<body>
  <div id="1">
  <div id="2">
    test
  </div><div></div>
</div><div></div>

https://jsfiddle.net/ng58e87w/

var allDivs = [].slice.call(document.getElementsByTagName("div"));  
for (var i = 0; i < allDivs.length; i++) {
  var newDiv = document.createElement("div");   
  allDivs[i].appendChild(newDiv);
  console.log(allDivs[i]);
}

Answer 1

使用.after()代替.appendChild()。

var words = ['apple','banana','cake'];
console.log(words[0]);
object1 = {
    name:'frank',
    greet:function(){
        alert('hello '+this.name)
    }
};

object2 = {
    name:'andy'
};

// Note that object2 has no greet method.
// But we may "borrow" from object1:

object1.greet.call(object2);
/*
var divs = [];
var arr = Array.prototype.slice.call( document.getElementsByTagName("div") );
for(var i = 0; i < arr.length; i++) {
   //do something to each div like
   var div = document.createElement("div");
   arr[i].appendChild(div);
}
*/

var allDivs = [].slice.call(document.getElementsByTagName("div"));  
  for (var i = 0; i < allDivs.length; i++) {
    var newDiv = document.createElement("div");   
    allDivs[i].after(newDiv);
    console.log(allDivs[i]);
  }

<div id="1">
  <div id="2">
    test
  </div>
</div>

Answer 2

我无法发表评论，但我相信你只是在制作空div并且不向他们添加任何东西。当你检查jsfiddle中的元素时，它们会显示出来。我还将他们的文本设置为某些东西，它似乎有效。

var allDivs = [].slice.call(document.getElementsByTagName("div"));  
  for (var i = 0; i < allDivs.length; i++) {
    var newDiv = document.createElement("div"); 
    newDiv.innerHTML = "Hidden Div?";
    allDivs[i].appendChild(newDiv);
    console.log(allDivs[i]);
  }

appendChild不在循环中处理div

2 个答案: