JavaScript получает родительский элемент и записывает держатель div для братьев и сестер

У меня есть следующая структура:

<div class="parent">
  <div id="child1">Content here</div>
  <div class="child2">Content here</div>
</div>

В onload я хочу включить div-держателя, который содержит все родительские дочерние элементы:

<div class="parent">
  <div id="holder">
    <div id="child1">Content here</div>
    <div class="child2">Content here</div>
  </div>
</div>

Зная только идентификатор "child1", как я могу добавить держатель div вокруг себя и братьев и сестер?

Вопросы

  • Идентификатор "child1" является единственным известным идентификатором.
  • Класс "parent" и "child2" являются динамическим именем и будут меняться, поэтому их нельзя использовать как идентификаторы.
  • должен быть ванильный JavaScript.

Мысли?

Ответы

Ответ 1

Увидев, что это должен быть JavaScript (а не jQuery), и вы можете только указать id1 по id, вы можете сделать что-то столь же грубое, как это:

var child1 = document.getElementById("child1"),
    parent = child1.parentNode,
    contents = parent.innerHTML ;
    parent.innerHTML = '<div id="holder">' + contents + '</div>';

Надеюсь, что это поможет...

Ответ 2

Он сказал, что нет jQuery, это звучит как домашнее задание, но:

var el = document.getElementById('child1');
var parent = el.parentNode;
parent.innerHTML = '<div id="holder">' + parent.innerHTML + '</div>';

Ответ 3

я написал маленький отрывок, чтобы пройти через DOM, чтобы найти первый соответствующий parentNode.

Надеюсь, это когда-нибудь кому-нибудь поможет.

(/¯◡ ‿ ◡) ⊃━ ☆ ﾟ. * ･｡ ﾟ,

function getFirstParentMatch(element, selector) {
  if (!element) {return element};
  element.matches(selector) || (element = (element.nodeName.toLowerCase() === 'html' ? false : getFirstParent(element.parentNode, selector)));
  return element;    
}