JavaScript获取父元素并为同级元素编写容器div

Question

我有以下结构：

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

在加载页面时，我想要包括一个“容器”div，该div包含所有父级元素的子元素，如下所示：

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

只知道"id=child1"，如何在它和它的兄弟元素外围添加一个包装div？

注意事项

• "id=child1"是唯一已知的标识符。
• 类名"parent"和"child2"是动态的名称，会发生变化，不能用作标识符。
• 需要使用纯JavaScript。

你有什么想法？

- mika.el

---

您的问题最开始是否有一个jQuery标签，而不是说“纯JavaScript”？只是想知道，因为您得到了很多jQuery答案（包括我），我确信在我回答时它提到了jQuery！ - James Allardice

抱歉James，我没有提到jQuery。（自发布以来，我的帖子还没有被编辑过） - mika.el

Answer 1

考虑到这必须是JavaScript（而不是jQuery），并且您只能通过id识别child1，您可以采用以下粗略的方法：

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

希望这可以帮助到你...

- Mike Sav

---

+1 是因为你是唯一一个注意到“需要使用纯 JavaScript”的人！不过我确定当问题首次被提出时没有这个要求... - James Allardice

但这是否给你答案呢？为什么你认为innerHTML很粗糙？ - Mike Sav

如果“child2” div 包含第三方内容（例如图像和脚本），使用 .innerHTML 不会强制重新加载内容吗？（我没有在我的桌面前测试。） - mika.el

我对此并不确定，因为在测试时，我向child1 div添加了一个外部图像，并且在重新绘制时（使用innerHTML）它确实加载。另外，您在原始问题中没有提到这一点... - Mike Sav

是的，我同意，当使用innerHTML和远程内容时，这是我想到的另一个问题。我可能需要发布另一个问题。感谢您的帮助。 - mika.el

感谢大家的帮助。 - mika.el

Answer 2

他说不用jQuery，这听起来像是一项作业任务，但是：

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

- anteatersa

Answer 3

我写了一个小代码片段来遍历DOM以找到第一个匹配的父节点。

希望这对某个人在某个时候有所帮助。

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

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

- stephanfriedrich

---

你的代码片段中有一个错误，getFirstParent 应该改为 getFirstParentMatch。 - Elph