Written by Kasumi

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 + “</終了タグ>”;

内側との変更点としてはinnerHTMLouterHTMLに変更されただけです。

上記で実装可能です。

まとめ

JavaScriptでコンテンツの内側・外側をHTMLタグで囲う方法について紹介しました。

以上で解説を終わります。

目次

関連記事

JavaScript

JavaScriptでn番目の子要素を取得する方法

2022.10.18
216
JavaScript

IEブラウザか、その他以外のブラウザかを判定し、条件分岐・判別する方法【Javascript】

更新日:2022.09.09
394
JavaScript

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

2022.10.09
273
JavaScript

【JavaScript初心者向け】繰り返し処理を使い、配列要素を展開する方法

2022.08.24
174