Javascript 如何在每个子元素（之前和之后）周围正确添加元素

标题可能有点混乱，所以我将展示一个例子来说明我的意思。假设我有一些像这样的html代码

然后我想在每个元素周围附加一个新元素，所以它将变成

需要注意的两件事是，首先，可能有多个子元素，如A、B、C、D、E。。。第二，parentElement中不能有像这样的子元素

如果是这样，只需添加一个newElem

我可以通过大量的代码和检查，使用jQuery的append、before和after以及其他方法来实现这一点，但是我想知道是否有一种更高效/干净的方法来编写它

---

谢谢

你真的不需要任何条件

如果使用

children（）

并在其上循环，如果没有，则不会发生任何事情。如果有-您可以使用

after（function）

来执行循环，然后最终对父容器使用

prepend（）

，无论是否有子容器

var newElement='New'；
$（'#parentElement'）.children（）.after（function（））{
返回新元素；
}).end（）.prepend（新元素）
.newElement{background:#ccc}

A.
B
C
您真的不需要任何条件

如果使用
children（）
并在其上循环，如果没有，则不会发生任何事情。如果有-您可以使用
after（function）
来执行循环，然后最终对父容器使用
prepend（）
，无论是否有子容器


var newElement='New'；
$（'#parentElement'）.children（）.after（function（））{
返回新元素；
}).end（）.prepend（新元素）
.newElement{background:#ccc}

A.
B
C
不带jquery：

function init() {

    var parent = document.getElementById('parentelement');
    for (var i = 0; i < parent.childElementCount; i = i + 3) {
        var newElement = document.createElement('div');
        newElement.appendChild(document.createTextNode('New Element'));
        parent.insertBefore(newElement, parent.children[i]);
        newElement = document.createElement('div');
        newElement.appendChild(document.createTextNode('New Element 2'));
        parent.insertBefore(newElement, parent.children[i + 2]);
    }
}

window.addEventListener('load', init);

函数init（）{
var parent=document.getElementById（'parentelement'）；
对于（变量i=0；i
不带jquery：

function init() {

    var parent = document.getElementById('parentelement');
    for (var i = 0; i < parent.childElementCount; i = i + 3) {
        var newElement = document.createElement('div');
        newElement.appendChild(document.createTextNode('New Element'));
        parent.insertBefore(newElement, parent.children[i]);
        newElement = document.createElement('div');
        newElement.appendChild(document.createTextNode('New Element 2'));
        parent.insertBefore(newElement, parent.children[i + 2]);
    }
}

window.addEventListener('load', init);

函数init（）{
var parent=document.getElementById（'parentelement'）；
对于（变量i=0；i
我会采取的方法，利用
之前（）
和
之后（）
：


var newElem=”“；
$（'#parentElement div'）。每个（函数（索引，元素）{
如果（索引==0）{
元素。之前（newElem）；
}
元素。之后（newElem）；
});
if（$（'#parentElement div'）。长度==0）{
$（'#parentElement'）.html（newElem）；
}
我会采取的方法，利用
之前（）
和
之后（）
：


var newElem=”“；
$（'#parentElement div'）。每个（函数（索引，元素）{
如果（索引==0）{
元素。之前（newElem）；
}
元素。之后（newElem）；
});
if（$（'#parentElement div'）。长度==0）{
$（'#parentElement'）.html（newElem）；
}
使用香草javascript，您可以做到这一点

var parentElement = document.getElementById("parentElement");
// clone children array
var children = Array.prototype.slice.call( parentElement.children )
// get the length of children
var length = children.length;


for(var i = 0;i <= length;i++){
  /*get current child*/
  var currentChild = children[i];
  /*create new element */
  var newElement = document.createElement("div");
  /*give it class*/
  newElement.className = "newElem"
  if(i == length){
    /*append the element if we reach the end of loop*/
    parentElement.appendChild(newElement)
  }else{
    /*use the insertBefore method*/
    parentElement.insertBefore(newElement ,  currentChild)
  }
}
/*log the result working 100%*/
console.log( parentElement )

var parentElement=document.getElementById（“parentElement”）；
//克隆子数组
var children=Array.prototype.slice.call（parentElement.children）
//了解儿童的长度
变量长度=childrence.length；
对于（var i=0；i和vanillajavascript，您可以这样做

var parentElement = document.getElementById("parentElement");
// clone children array
var children = Array.prototype.slice.call( parentElement.children )
// get the length of children
var length = children.length;


for(var i = 0;i <= length;i++){
  /*get current child*/
  var currentChild = children[i];
  /*create new element */
  var newElement = document.createElement("div");
  /*give it class*/
  newElement.className = "newElem"
  if(i == length){
    /*append the element if we reach the end of loop*/
    parentElement.appendChild(newElement)
  }else{
    /*use the insertBefore method*/
    parentElement.insertBefore(newElement ,  currentChild)
  }
}
/*log the result working 100%*/
console.log( parentElement )

var parentElement=document.getElementById（“parentElement”）；
//克隆子数组
var children=Array.prototype.slice.call（parentElement.children）
//了解儿童的长度
变量长度=childrence.length；
对于（var i=0；我请向我们提供更多详细信息，包括您尝试过的内容。请向我们提供更多详细信息，包括您尝试过的内容。如果没有孩子怎么办？问题中的案例2如果没有孩子怎么办？问题中的案例2如果没有孩子怎么办？问题中的案例2question@charlietfl啊，对不起，我没看到那部分问题。Updated@charlietfl换了笔，但不是在这里。谢谢你友好的提醒：）如果没有孩子怎么办？案例2question@charlietfl啊，对不起，我没看到问题的那一部分。Updated@charlietfl用钢笔换了，但不在这里。谢谢你友好的提醒：）如果没有孩子怎么办？问题中的案例2抱歉@charlietfl我以前没见过，但如果没有孩子，你不会相信…，childElementCount将为零，for循环未执行如果没有孩子怎么办？问题中的案例2抱歉@charlietfl我以前没见过，但如果没有孩子，你不会相信。。。，childElementCount将为零，并且不会执行for循环