私は次の構造を持っています:
<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を追加するにはどうすればよいですか?
考慮事項
考え?
これはJavaScript(jQueryではない)である必要があり、IDによってのみ子を識別できるため、次のような大まかなことができます。
var child1 = document.getElementById("child1"),
parent = child1.parentNode,
contents = parent.innerHTML ;
parent.innerHTML = '<div id="holder">' + contents + '</div>';
お役に立てれば...
彼はjQueryを言わなかった、これは宿題のように聞こえますが:
var el = document.getElementById('child1');
var parent = el.parentNode;
parent.innerHTML = '<div id="holder">' + parent.innerHTML + '</div>';
最初に一致する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;
}