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でJSONデータを読み込み・HTMLへ出力する方法

2022.10.16
23947
JavaScript

Javascriptでvideoタグのオプションを設定

更新日:2019.11.28
812
JavaScript

【JavaScript】fetchメソッドを使ってJSONを非同期で読み込み・HTMLに出力する方法

2023.01.02
5160
JavaScript

【JavaScript】文字列から必要な特定文字のみ切り出す方法

2023.01.27
821