Как правильно добавить элемент вокруг каждого дочернего элемента (до и после)

Question

Название может быть немного запутанным, поэтому я покажу пример того, что я имею в виду.Скажем, у меня есть некоторый html-код, подобный этому

<div id="parentElement">
 <div class="A"></div>
 <div class="B"></div>
 <div class="C"></div>
</div>

Затем я хотел бы добавить новый элемент вокруг каждого элемента, чтобы он превратился в

<div id="parentElement">
 <div class="newElem"></div>
 <div class="A"></div>
 <div class="newElem"></div>
 <div class="B"></div>
 <div class="newElem"></div>
 <div class="C"></div>
 <div class="newElem"></div>
</div>

Обратите внимание на две вещи:во-первых, может быть несколько дочерних элементов, таких как A, B, C, D, E, ... И два, parentElement не может иметь дочерних элементов, таких как

<div id="parentElement">
</div>

, и если это так, одинnewElem будет просто добавлен.

<div id="parentElement">
 <div class="newElem"></div>
</div>

Я могу сделать это с помощью тонны кода и тонны проверок, используя jQuery append, before, after и другие методы, но мне интересно, есть ли ещеэффективный / чистый способ выписать это.

Спасибо!

Answer 1

Вы действительно не нуждаетесь ни в каких условных выражениях.

Если вы используете children() и зацикливаете их, ничего не произойдет, если их нет.Если есть - вы можете использовать after(function), чтобы выполнить цикл, а затем, наконец, использовать prepend() для родительского контейнера, есть ли дочерние элементы или нет

var newElement = '<div class="newElement">New</div>';

$('#parentElement').children().after(function(){
  return newElement;
}).end().prepend(newElement);

.newElement{ background:#ccc}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parentElement">
 <div class="A">A</div>
 <div class="B">B</div>
 <div class="C">C</div>
</div>

Answer 2

с ванилью 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 )

результат, который мы получаем

Answer 3

Подход, который я выбрал бы, используя before() и after():

Codepen

var newElem = "<div class='newElem'></div>";
$('#parentElement div').each(function (index, element) {
    if (index == 0) {
       element.before(newElem); 
    }

    element.after(newElem);
});

if ($('#parentElement div').length == 0) {
    $('#parentElement').html(newElem);
}

Answer 4

без 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);