HTML要素のソースコードを取得、編集する

HTML要素のソースコードを取得して編集する

ページ中にある特定のHTML要素について、ソースコードを取得するときはinnerHTMLプロパティかouterHTMLプロパティを使うと、文字列形式で取得することができます。

innerHTMLプロパティは指定したHTML要素自身は含まず、子孫要素のソースコードのみを取得するプロパティです。
もう1つのouterHTMLプロパティは指定したHTML要素自身を含めたソースコードを取得することができます。
指定したHTML要素も含めて取得したいときはouterHTMLプロパティ、含めないときはinnerHTMLプロパティを使います。

以下のHTMLコードを使って、2つのプロパティの使用例を解説していきます。

HTML コード例

<h1>JavaScriptレシピ</h1>
<article id="textbox">
	<p>このエリアにHTML要素を追加する</p>
</article>

以下の例では、上記HTMLにあるarticle要素をid属性から取得して、innerHTMLプロパティとouterHTMLプロパティでそれぞれソースコードを取得して出力します。

JS コード例

// id属性からHTML要素を取得
let textbox = document.getElementById("textbox");

// 子孫要素のソースコードを取得
let inner_code = textbox.innerHTML;
console.log(inner_code);
// <p>このエリアにHTML要素を追加する</p>

// 自身を含めたソースコードを取得
let outer_code = textbox.outerHTML;
console.log(outer_code);
// <article id="textbox">
// 	<p>このエリアにHTML要素を追加する</p>
// </article>

なお、取得したコードは元のHTML要素とは関連がないため、文字列を編集をしても特に影響はありません。
コードを編集してHTML要素に反映するときは、プロパティにソースコードを代入します。

以下の例はarticle要素のinnerHTMLプロパティにdiv要素を挿入することで、article要素の子孫要素を編集します。

JS コード例

// id="textbox"のソースコードを取得して出力
let textbox = document.getElementById("textbox");

// 新しいHTMLコードを挿入
textbox.innerHTML = '<div>empty</div>';

このコードを実行すると、article要素の子孫要素は以下の内容に変更されます。

編集後のHTML コード例

<article id="textbox">
	<div>empty</div>
</article>

続いて、今度はarticle要素のouterHTMLプロパティにdiv要素を挿入します。
こちらは子孫要素だけじゃなく、article要素がそのまま置き換えられます。

JS コード例

// id="textbox"のソースコードを取得して出力
let textbox = document.getElementById("textbox");

// 新しいHTMLコードを挿入
textbox.outerHTML = '<div>empty</div>';

このコードを実行すると、article要素は以下の内容に変更されます。

編集後のHTML コード例

<div>empty</div>

article要素ごとdiv要素へ置き換えられました。
innerHTMLプロパティとouterHTMLプロパティにはこのような違いがあります。