javascriptでhtml内容物前後にタグ挿入する方法

Question

htmlを以下のように書き換えたいのですが、適切な関数があれば教えて下さい。

<!--書き換え前-->
<div id="test_div2">中身だよ</div>
<!--書き換え後-->
<div id="test_div2"><span>中身だよ</span></div>

シンプルにこれでもいけます

let get_div2 = document.querySelector("#test_div2");
get_div2.innerHTML = "<span>" + test_div2.innerHTML + "</span>";

しかし、これだと以下のような結果になります。

let get_div2 = document.querySelector("#test_div2");
get_div2.insertAdjacentHTML("beforeend","<span>");
get_div2.insertAdjacentHTML("afterbegin","</span>");

<div id="test_div2">中身だよ<span></span></div>

このhtml内容物の前後を、別のタグで挟み込むという処理のやり方が見つからなかったので、よく使われる方法を教えて下さい。

Comments

[m.ts10806]

「一発でできる」を求めてるなら「ない」となるのでは。
同じようにinnerHTMLもしくはappendChild・またはappend,prependで２回

[K_3578]

以前も指摘しましたが回答が付いているのに反応がなく、未解決の質問が過去に多数ありますが、
何かしら対応されないのでしょうか。

Answer 1

シンプルにこれでもいけます

それをやるか、別にdocument.createElement('span')したところにappendChildしていくか（コードとしてはより長くなる）です。

insertAdjacentHTMLは、「パースした結果であるノード」を挿入するものなので（MDN）、「</span>だけ挿入」のようなことはできません。

Comments

[blendegg]

回答ありがとうございます。このように設定してみましたが、divの中身は"[object HTMLSpanElement]"となります。

let test_div2 = document.getElementById("test_div2");
let span = document.createElement("span");
span.textContent = test_div2.innerHTML;
test_div2.innerHTML = span;

教えていただいたとおりappendchildを使用しました。
無事追加出来ましたが、古い内容物が残ったままなのでreplacechildを使用しました。

let test_div2 = document.getElementById("test_div2");
let span = document.createElement("span");
span.textContent = test_div2.innerHTML;
test_div2.replaceChild(span,test_div2.innerHTML);
こうした場合、４行目の第２引数にエラーが出ます。
エラー：Uncaught TypeError: Node.replaceChild: Argument 2 is not an object.

第２引数はオブジェクトではないということですが、javascriptにおけるオブジェクトとはなんのことでしょうか？おそらくdom(htmlタグ)がオブジェクトなんでしょうけども、文字列のみを置き換える事はできますか？

[maisumakun]

> 文字列のみを置き換える事はできますか？

文字列もdocument.createTextNodeを使うことでDOMノードとして扱うことが可能です。

[maisumakun]

（シンプルにやりたい、というのはどこへ行ったのでしょうか…？）

[blendegg]

文字はオブジェクトのプロパティとして設定しないといけないんですね。
単なる文字列はオブジェクトとして扱われないということですね。

シンプルにやればいいというのは、innnerhtmlを使えば良いということですよね？
一応replace childの使い方も覚えておきたかったので、、、。

Answer 2

シンプルにこれでもいけます

シンプルにそれでやってください。もしくはこう

const div=document.querySelector('#test_div2');
div.appendChild([...div.childNodes].reduce((x,y)=>(x.appendChild(y),x),document.createElement('span')));

Answer 3

jqueryの関数を使えばシンプルにできますよ

Answer 4

Range.selectNodeContents() と Range.surroundContents() の組み合わせで実現する方法がありますが、コードがとくにシンプルになるわけでもないので、質問文にある方法で良いと思います。