JavaScriptでバナーを挿入して表示させる

JavaScriptでバナーを挿入する方法を個人的なメモとして。

ザックリした内容です。

実現したいこと

実現したいことは以下の通り。

• JavaScript(jQueryは使わない)
• 挿入予定のバナー構造はdiv>a>img
• 「指定したクラスを持つ最初の要素」、なければ「指定したh要素」の下にバナーを出力する

上記をふまえ、この記事用の前提です。

• 「指定したクラスを持つ最初の要素」のクラス名はinfoとする
• 「指定したh要素」はh2とする

バナーを表示する方法は様々ですが、今回はHTML上にバナーは存在せず、JavaScriptを使ってDOM構築後にバナーを挿入させます。

その際の目印にはHTMLタグの他にclassやidが使われますが、今回はその目印にclassを選んでいます。

idの方が簡単なので、可能ならidを使う方がよいでしょう。

コード

前項に基づき、以下がコードです。

(!function(){
//最終的に要素挿入位置の目印をいれる変数を先に定義
var t  = '';
//要素挿入位置の特定に必要なクラスを持つ要素を指定
var t1 = document.getElementsByClassName('info');
//要素挿入位置の特定に必要なタグを
var t2 = document.getElementsByTagName('h1');
//クラスを持つ要素が優先で、なければタグを取得
if(t1.length > 0){
  //指定クラスを持つ最初の要素を取得
  t = t1[0];
  //要素挿入用の関数に値を渡して実行
  add_obj(t);
} else if (t2.length > 0){
  //指定タグの最初の要素を取得
  t = t2[0];
  //要素挿入用の関数に値を渡して実行
  add_obj(t);
} else {
  return;
}

//要素挿入用の関数
function add_obj(t){
  var obj = '';
  var div = document.createElement('div');
  var a   = document.createElement('a');
  var img = document.createElement('img');

  //指定した特定要素にstyle属性を付ける場合
  t.setAttribute('style','margin-bottom:20px;');

  //バナーのaとimgを囲むdivにクラス名を付ける場合
  div.classList.add = 'banner';
  //バナーのaとimgを囲むdivにstyle属性を付ける場合
  div.setAttribute('style','margin-bottom:20px;');

  //バナーの飛び先のアドレス
  a.href = 'https:// ';
  //別窓で開く場合
  a.setAttribute('target','_blank');

  //バナー画像のアドレス
  img.setAttribute('src','https:// ');
  //バナーのalt
  img.setAttribute('alt','画像のalt');
  //バナーのwidth
  img.setAttribute('width','600');
  //バナーのheoight
  img.setAttribute('height','50');

  //aタグの中に、バナー画像を挿入
  obj = a.appendChild(img);
  //divの中に、バナーを
  obj = div.appendChild(a);

  //指定した要素の次に、バナーとaタグを内包したdivを追加する
  obj = t.parentNode.insertBefore(d, t.nextSibling);
}

}());

効率の良い書き方とはいえないと思いますが、上記コードで動作は確認しました。

多少便利かなと思ったのは、優先順位をつけて挿入位置の目印となる要素を複数指定できる点です。

挿入位置の目印となる要素が常に存在しない場合もありえますので、そういう場合には使いやすいでしょう。

結び

バナー類は後から付けることも外すことも多い要素だと思いますので、バナー画像とa、それを内包するdivをまとめて操作できると運用が楽になるかなと。

しかし、挿入予定箇所がページ上部の場合、バナーの縦幅の分だけ全体が下にずれて見えることが多々あります。
これには見た目の問題の他にも、クリック位置がズレてストレスが溜まる原因にもなり、留意が必要です。

例えばWordPressのようにPHPで動的にサイトを出力している場合は、PHPを用いてサーバー側でバナーを挿入させる方がリスクは低いかもしれません。