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”是动态名称，将会更改，因此不能用作标识符。
需要是vanilla 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;    
}

JavaScript为兄弟姐妹获取父元素和写持有者div

3 个答案: