web-dev-qa-db-ja.com

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」IDしかわからないので、自分と兄弟の周りにホルダーdivを追加するにはどうすればよいですか？

考慮事項

  • 「child1」IDは唯一の既知の識別子です。
  • クラス「parent」と「child2」は動的な名前であり、変更されるため、識別子として使用できません。
  • バニラJavaScriptである必要があります。

考え？

javascriptdomelementparent
13
mika.el

これはJavaScript（jQueryではない）である必要があり、IDによってのみ子を識別できるため、次のような大まかなことができます。

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

お役に立てれば...

34
Mike Sav

彼はjQueryを言わなかった、これは宿題のように聞こえますが：

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

最初に一致するparentNodeを見つけるためにDOMを移動する小さなスニペットを書きました。

これがいつか誰かを助けることを願っています。

（/¯◡‿◡）⊃━☆ﾟ。 *・｡ ﾟ、

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