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

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

更新日:2022.09.09
385
JavaScript

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

更新日:2019.11.28
341
JavaScript

PACE.jsを使って簡単ローディング画面の作り方

更新日:2019.11.28
1190
HTMLCSS JavaScript

スクロールバーが表示されない。SimpleBarを使おう!【即解決】

更新日:2022.09.09
5796