.outerHTML

JavaScriptの.outerHTMLで指定タグをdivタグで括る

2022年4月23日 3分

JavaScript のElement オブジェクトに .innerHTML のプロパティがあります。この.innerHTMLは、要素内の HTML を取得したり設定するプロパティです。

一方.outerHTML は、要素自身と要素に含まれる HTML を取得したり設定するプロパティです。

この記事では、.outerHTML を使って指定のタグを div タグで括る方法について解説します。

.outerHTML
ボタンクリックでdivタグで括られるサンプル
- 変更前・後のコード
実装の手順と方法
ざっくりとしたコードの解説
- HTML
- JavaScript
さいごに

.outerHTML

JavaScriptの.outerHTML は、要素自身と要素に含まれる HTML を取得したり設定するプロパティです。

const content = element.outerHTML;

この記事ではこの.outerHTML を使って、指定のタグ全部をループを使って div タグで全て括るスニペットについてご紹介しています。

ボタンクリックでdivタグで括られるサンプル

早速サンプルですが、ボタンをクリックすると「その1〜その5」までの p タグの要素が、 div タグで括られるようになります。

その1
その2
その3
その4
その5

かかかず

変わったことが分かりやすいように、divタグが付くと色が変わるようにCSSを追記しています。

変更前・後のコード

上記の見た目の変化だけだと分かりづらいので、コードの変化についても紹介しておきます。

まずは、div タグが追記される前のコードは以下の通りです。

<ul class="sampleList">
<li><p>その1</p></li>
<li><p>その2</p></li>
<li><p>その3</p></li>
<li><p>その4</p></li>
<li><p>その5</p></li>
</ul>

上記のコードに、JavaScriptのコードを加えると、pタグが「class=’midashi’」の付いたdiv で括られます。

<ul class="sampleList">
<li><div class='midashi'><p>その1</p></div></li>
<li><div class='midashi'><p>その2</p></div></li>
<li><div class='midashi'><p>その3</p></div></li>
<li><div class='midashi'><p>その4</p></div></li>
<li><div class='midashi'><p>その5</p></div></li>
</ul>

実装の手順と方法

コードの解説の前に、実装の手順と方法について解説します。

かかかず

この記事のコードをそのまま使うことはないと思いますが、念の為の解説です。

HTMLを記述

はじめに、HTMLを記述します。

上記は、JavaScriptを動かす用のコードなので、どのような形式でも大丈夫ですが、後述のJavaScriptと連動させる必要があります。

コードを表示

<ul class="sampleList">
<li><p>その1</p></li>
<li><p>その2</p></li>
<li><p>その3</p></li>
<li><p>その4</p></li>
<li><p>その5</p></li>
</ul>

連動させるのは、JavaScriptのコード1行目にある.querySelectorAll に入る指定タグなので、それが含有されるコードを記述するようにしましょう。

JavaScriptを記述

次に、JavaScriptのコードをHTMLを設置したページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

//pタグを取得
const x = document.querySelectorAll('.sampleList li p');
//一致したpタグをループで回す
 for (i = 0; i < x.length; i++) {
x[i].outerHTML = "<div class='midashi'>" + x[i].outerHTML + "</div>";
}
console.log(x);
},

かかかず

これで記述は完了です。

ざっくりとしたコードの解説

コードはHTMLとJavaScriptの2種類です。この記事のスニペットでは、見た目をさほどいじっていないので、CSSは割愛させてください。

HTML

HTMLは li のリストタグの中に p タグが入ったシンプルな構造です。

<ul class="sampleList">
<li><p>その1</p></li>
<li><p>その2</p></li>
<li><p>その3</p></li>
<li><p>その4</p></li>
<li><p>その5</p></li>
</ul>

サンプルに作っているものなので、特段の解説はないですが、JavaScriptのコード1行目.querySelectorAll で指定するタグが入るように記述しましょう。

JavaScript

JavaScriptは、まずはじめに「pタグを取得」して、取得した p タグ全てに「div タグで括るループ」を動かすコード内容です。

//pタグを取得
const x = document.querySelectorAll('.sampleList li p');
//一致したpタグをループで回す
 for (i = 0; i < x.length; i++) {
x[i].outerHTML = "<div class='midashi'>" + x[i].outerHTML + "</div>";
}
console.log(x);
},

ループの中で.outerHTML を記述して、そこで「どのようなタグで括らせるか？」を指定します。