JavaScriptでコンテンツの内側・外側をHTMLタグで囲う方法
JavaScriptでコンテンツの内側・外側を任意のhtmlタグで動的に囲いたい。
本記事ではこのような悩みを解決。
実装例を元に解説します。
実装サンプル
See the Pen
JavaScriptで内側・外側をhtmlタグで囲う by Kohei (@kouk05)
on CodePen.0
codepenを使った実装サンプルです。
JavaScriptを使い、pタグの内側をspanタグ・外側をmainタグで囲ってます。（ブラウザでpタグを検証するとわかります。）
実装方法は以下の通りです。
内側をHTMLタグで囲う
// 囲いたい要素
var txt = document.querySelector('.txt');
// 内側をspanタグで囲う
txt.innerHTML = "<span>" + txt.innerHTML + "</span>";
内側をHTMLタグで囲うJavaScriptコード例です。
txtクラス内のコンテンツをspanタグで囲ってます。
内側をHTMLタグで囲うにはinnerHTMLを使います。
使い方は以下の通りです。
囲いたい要素.innerHTML = “開始タグ” + 囲いたい要素.innerHTML + “終了タグ”;
上記で実装可能です。
外側をHTMLタグで囲う
// 囲いたい要素
var txt = document.querySelector('.txt');
// 外側をmainタグで囲う
txt.outerHTML = "<main>" + txt.outerHTML + "</main>";
外側をHTMLタグで囲うJavaScriptコード例です。
txtクラス要素をmainタグで囲ってます。
外側をHTMLタグで囲うにはouterHTMLを使います。
使い方は以下の通りです。
囲いたい要素.outerHTML = “<開始タグ>” + 囲いたい要素.outerHTML + “</終了タグ>”;
内側との変更点としてはinnerHTMLがouterHTMLに変更されただけです。
上記で実装可能です。
まとめ
JavaScriptでコンテンツの内側・外側をHTMLタグで囲う方法について紹介しました。
以上で解説を終わります。
目次