JavaScriptのDOM操作で、特定の要素の親要素として新要素を作る。

Question

語彙力が無いので説明しにくいのですが、
JavaScriptのDOM操作で、特定の要素の親要素として新要素を作りたいのですが、どうすれば良いかわかりません。

↑例えばこの状態からelement4に対してelement4-parentという親要素を追加したいっていうときに

という風にしたいです。

Comments

[yambejp]

このケースだとclassよりidの方がわかりやすいかも。
またjQueryとか選択肢に入っていますか？（関数が用意されている）
親の追加はなんのトリガーで発動する予定ですか？

Answer 1

こんな感じでどうですか？

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
var c4p=Object.assign(document.createElement('div'),{id:"c4p"});
var c4=document.querySelector('#c4');
c4.parentNode.insertBefore(c4p,c4);
c4p.appendChild(c4);
});
</script>

<div id="p">
p-start
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="c5">c5</div>
p-end
</div>

[qwertyuiop]

なるほど、できました！
アドバイスなども教えて頂きありがとうございました。