javascript - JavaScript 获取父元素并为兄弟姐妹编写持有者 div

Question

我有以下结构：

<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”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 : getFirstParentMatch(element.parentNode, selector)));
  return element;    
}