JavaScript获取父元素并为同级写holder div

Question

我具有以下结构：

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

在加载时，我想包括一个“ holder” div，它像这样保存所有父母的孩子：

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

仅知道“ child1” ID，我如何在其自身和兄弟姐妹周围添加一个持有人div？

注意事项

• “ child1” id是唯一的已知标识符。
• 类“ parent”和“ child2”是动态名称，将更改，因此不能用作标识符。
• 需要使用香草JavaScript。

想法？

Answer 1

[这似乎必须是JavaScript（而不是jQuery），并且您只能通过id来标识child1，您可以像这样粗拙地做一些事情：

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

希望这有帮助...

Answer 2

他说没有jQuery，这听起来像是一项作业，但是：

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

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