サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

 > 

【JavaScript】HTMLコードを要素の前後に挿入する(広告の挿入などに)

【JavaScript】HTMLコードを要素の前後に挿入する(広告の挿入などに)

この記事にはプロモーションが含まれています。

オウンドメディアの場合は別として、ビジネス目的でブログを運営する場合はGoogleアドセンスやアフィリエイトといった広告の存在が欠かせません。

広告の運営方法について説明する記事ではないので詳しくは割愛しますが、ブログに広告を掲載するには広告のHTMLコードを挿入する必要があります。

そしてHTMLコードをブログ記事内に埋め込む方法は大きく分けて2つあります。

1つは記事内に直接HTMLコードを埋め込む(静的)という方法です。
とても単純で簡単な方法ですが1ページ1ページ手動で挿入することになるため、掲載する広告を変更したくなった場合はとても面倒です。
同様に、広告の掲載位置を変えたくなった場合も大きな手間が発生してしまいます。

そしてもう1つの方法は、JavaScriptを使って動的に挿入するという方法です。

JavaScriptで管理していれば、掲載する広告を変えたくなったり掲載位置を変えたくなったりしても、JavaScriptのコードの一部を変えるだけであっという間に全てのページの広告の変更が完了します。

そこで今回は、ブログ記事に広告のHTMLコードを挿入するというケースを例に、JavaScriptでHTMLコードを要素の前後に挿入する方法をご紹介します。

– 目次 –

要素の直前or直後に挿入

まずはHTMLコードを特定の要素の直前に挿入する方法です。

以下のように、<article>要素の中に<section>要素が4つあり、それぞれ<h2>要素による見出しとそれに続く<p>要素を子要素として含んでいるものがあるとします。
※見た目はCSSで調整しています。<section>要素には背景色と境界線、marginを設定しています。

HTML※スクロールできます

<article>
	<section>
		<h2>第1章のタイトル</h2>
		<p>第1章のサンプルテキスト</p>
	</section>
	
	<section>
		<h2>第2章のタイトル</h2>
		<p>第2章のサンプルテキスト</p>
	</section>
	
	<section>
		<h2>第3章のタイトル</h2>
		<p>第3章のサンプルテキスト</p>
	</section>
	
	<section>
		<h2>第4章のタイトル</h2>
		<p>第4章のサンプルテキスト</p>
	</section>
</article>

表示結果

上記コードの表示結果

そしてここでは例として、第2章(2番目)の<section>要素の直前に、広告のHTMLコードを挿入してみようと思います。

要素の前後にHTMLコードを挿入するには、insertAdjacentHTML()を使います。

insertAdjacentHTML()のかっこの中に、
(1)要素のどこに挿入するか
(2)何のコードを挿入するか
を引数として指定します。

今回は要素の直前に挿入したいので、第一引数はbeforebeginを指定します。

広告のコードは、分かりやすくテキトーに<aside>要素を使ったものにしておきます。

前準備として、広告のコードを定数に格納しておきましょう。(下記コード参照)

JavaScript

const affiliateCode = '<aside>広告コード</aside>'; //広告コードを定数に格納

この広告コードを2番目の<section>要素の直前に挿入するには、以下のように記述すればOKです。

JavaScript

const affiliateCode = '<aside>広告コード</aside>';
document.querySelector('article section:nth-child(2)').insertAdjacentHTML('beforebegin', affiliateCode);

表示結果

beforebegin表示結果

第2章の<section>要素の直前に広告のコードが挿入されました。

なお、今回はquerySelectorの指定で擬似クラス:nth-childを使って要素を取得していますが、それぞれの<section>要素にidやclassをつけて、id/class名で要素を取得してもOKです。

ただしその場合、全ての記事ページの<section>要素に、統一されたid/class名を付けるようにしておく必要があります。


次は、要素の直後にHTMLコードを挿入する方法を確認していきましょう。

要素の直後に挿入するには、insertAdjacentHTML()の第一引数にafterendを指定します。

この広告コードを2番目の<section>要素の直後に挿入するには、以下のように記述すればOKです。

JavaScript

const affiliateCode = '<aside>広告コード</aside>';
document.querySelector('article section:nth-child(2)').insertAdjacentHTML('afterend', affiliateCode);

表示結果

afterendの表示結果

2番目の<section>要素の直後に広告のコードが挿入されたのが確認できますね。

このようにJavaScriptで広告コードを管理することで、簡単に挿入位置を変更することができます。
WordPressではテーマやプラグインの機能で広告を管理できる場合もありますが、より自由なカスタマイズをしたい場合はJavaScriptの知識が役に立つことも多いです。

    POINT!
  1. ・insertAdjacentHTML()で、特定の要素の前後にHTMLコードの挿入ができる!
  2. ・要素の直前に挿入したい場合は、第一引数をbeforebeginに!
  3. ・要素の直後に挿入したい場合は、第一引数をafterendに!

要素の子要素として挿入

前章では特定の要素の直前or直後にHTMLコードを挿入することで、特定の要素の兄弟要素として広告が挿入されました。

ですが、特定の要素の直前/直後に挿入するのではなく、子要素として中に含めたい…という場合もありますよね。
insertAdjacentHTML()の第一引数には、そのための引数も用意されています。

まずは、特定の要素の最初の子要素として、HTMLコードを挿入したい場合を紹介します。

最初の子要素としてHTMLコードを挿入する場合は、insertAdjacentHTML()の第一引数にafterbeginを指定します。

2番目の<section>要素の最初の子要素として、広告コードを挿入してみましょう。

JavaScript

const affiliateCode = '<aside>広告コード</aside>';
document.querySelector('article section:nth-child(2)').insertAdjacentHTML('afterbegin', affiliateCode);

表示結果

afterbeginの表示結果

<section>要素の外側ではなく、内側に挿入=子要素として挿入されていることが確認できます。

章が始まってすぐ(タイトルの前)に挿入したい場合に良いですね。


そして今度は、特定の要素の最後の子要素としてHTMLコードを挿入したいケースです。

最後の子要素として挿入するには、insertAdjacentHTML()の第一引数にbeforeendを指定します。

この広告コードを2番目の<section>要素の最後の子要素として挿入するには、以下のように記述すればOKです。

JavaScript

const affiliateCode = '<aside>広告コード</aside>';
document.querySelector('article section:nth-child(2)').insertAdjacentHTML('beforeend', affiliateCode);

表示結果

beforeendの表示結果

afterbeginと同じく<section>要素の子要素としてコードが挿入されていますが、afterbeginと違ってbeforeendは最後の子要素として挿入されています。

こちらは章の最後に広告を挟みたい場合に適しています。

    POINT!
  1. ・insertAdjacentHTML()では、特定の要素の子要素としてHTMLコードを挿入することも可能!
  2. ・特定の要素の最初の子要素として挿入したい場合は、第一引数をaftrebeginに!
  3. ・特定の要素の最後の子要素として挿入したい場合は、第一引数をbeforeendに!

体感してみよう

insertAdjacentHTML()の第一引数を変更したら挿入位置がどうなるか、ボタンクリックで感覚をつかめる機能を用意しました。

※これまでの例と同じように、2番目の<section>要素をターゲットとした場合の挙動 です。

引数と挿入位置を頭の中だけで記憶するよりも、感覚的に掴むと忘れづらくなりますよ!

今回は広告コードの挿入を例にしていますが、もちろん他にも色々と使い道はあるかと思います。
動的に要素(HTMLコード)を特定の場所に追加したいことが出てきたら、insertAdjacentHTML()を思い出してみてくださいね!

- 関連記事 -

今回の動画で紹介したコード!

今回の解説動画で使用したコードです。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント</title>
	<style>
		article {
			max-width: 350px;
			padding: 20px 55px;
		}
		aside {
			background: white;
			padding: 20px;
			background-color: #df0000;
			color: white;
		}
		section {
			margin: 16px 0;
			background-color: #ffff99;
			padding: 10px 20px;
			border: solid 2px black;
		}
	</style>
</head>

<body>
<article>
	<section>
		<h2>第1章のタイトル</h2>
		<p>第1章のサンプルテキスト</p>
	</section>
	
	<section>
		<h2>第2章のタイトル</h2>
		<p>第2章のサンプルテキスト</p>
	</section>
	
	<section>
		<h2>第3章のタイトル</h2>
		<p>第3章のサンプルテキスト</p>
	</section>
	
	<section>
		<h2>第4章のタイトル</h2>
		<p>第4章のサンプルテキスト</p>
	</section>
</article>
	
	<script>
		const affiliateCode = '<aside>広告コードB</aside>';
		
		//document.querySelector('article section:nth-child(2)').insertAdjacentHTML('beforebegin',affiliateCode);//
		//document.querySelector('article section:nth-child(2)').insertAdjacentHTML('afterend',affiliateCode);//
		
		//document.querySelector('article section:nth-child(2)').insertAdjacentHTML('afterbegin',affiliateCode);//
		
		document.querySelector('article section:nth-child(3)').insertAdjacentHTML('beforeend',affiliateCode);
	</script>
</body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
Michihiro

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:応用情報技術者/基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン