【javascript,jQuery】見出しタグ内にspanタグを仕込みたかった時の備忘録

やりたいこと

javascript,jQueryを使ってspanタグを差し込む

//これを
<h2>テキストが入ってるよ</h2>

//こうしたい
<h2><span>テキストが入ってるよ</span></h2>

jqueryでの書き方

$(function(){
	$('article h2').wrapInner('<span></span>');
});

これだけでarticle内の見出しタグh2全てにspanタグを差し込めます

javascriptでの書き方

// article内の見出しタグh2を取得
var elements = document.querySelectorAll('article h2');
//　querySelectorAllで取得した情報はNodeListという配列風オブジェクトなのでJavaScriptのforEachが使えないから配列にする
var element = Array.prototype.slice.call(elements);
// forEachを使って要素の中身にspanタグを追加する
element.forEach(function(elem, index) {
  elem.innerHTML = "<span>" + elem.innerHTML + "</span>";
});

理解を深める意味でjavascriptのコードも調べたら思っていた以上に大変だった

• 「querySelectorAll」で取得した情報はNodeListという配列風オブジェクトでforEachが使えないから配列にする必要がある
• 配列にする際のコードは「[].slice.call」でもいけるみたい
• functionの引数は第1がタグ含む中身、第2が配列の順番っぽい