JavaScript で特定の要素の前に要素を挿入する

1. DOM で要素を作成し、挿入する

例えば、JavaScript を使い、body 要素の直後に div 要素を挿入したいとする。

Main page - MDC via kwout

document – MDC のメソッドによると、

• 要素を特定の要素の前に挿入する Node.insertBefore 
• body 要素を返す document.body
• 要素の最初の子を返す Node.firstChild
• 要素を生成する document.createElement

element のメソッドには、

• 要素の中身に対応した element.innerHTML

これらを使って、コードを書く。

var newElem = document.createElement("div");
newElem.innerHTML = "挿入";
document.body.insertBefore(newElem, document.body.firstChild);

 

element.parentNode

追記 (2009.9.26) : 4.7. Inserting content before an element [Dive Into Greasemonkey] では、親要素を指定するのに、element.parentNode を利用している。

var newElem = document.createElement("div");
var p = document.body.firstChild;   // この要素の前に挿入したい
newElem.innerHTML = "挿入";
p.parentNode.insertBefore(newElem, p);

 

iframe 要素を挿入

div 要素の代わりに iframe 要素を挿入したい場合は、

var frame = document.createElement("iframe");
frame.src = "https://developer.mozilla.org/en/Gecko_DOM_Reference";
frame.width = 500;
frame.height = 500;
document.body.insertBefore(frame, document.body.firstChild);

• cf. iframe

当初、document のプロパティを見て、要素の中身を書くために

• Node.textContent プロパティ

を利用すれば良いと考えた。しかし、Node.textContet には問題がある。

… IEではtextContentは使えないので、この命令を使う場合にはブラウザのタイプ判定による場合分けが必要。

(innerTextとtextContent - javascript 覚え書き日記 - g:javascript より)

Node.textContent の代わりに、innerHTML を利用した。

タグの中身を取得するにはinnerHTMLを使う。

他に整形テキストを取得するinnterTextと、タグ自身を含む文字列を取得するouterHTMLがあるが、結論から言うとこの2つはFireFoxでは利用できない。innerHTMLのみが共通仕様。他にも微妙に違いがある。

(innerHTMLとか（IEとFireFoxの差異） - perl 覚え書き日記 - Hatena::Group::Perl より)

 

2. jQuery で要素を生成し、挿入する

jQuery via kwout

同じことを jQuery を使って書きたい。

要素を追加するために after(content) を利用する。

after(content)

各要素の後ろにコンテンツを挿入する。

引数

content

String,Element,jQuery

追加する文字列、DOM ElementおよびjQueryオブジェクト

追加する内容は、文字列で指定する。 DOM Element でも指定できるということは、先ほどのように createElement メソッドを使って生成したものを指定できるようだ。

$(document).ready(function(){
	$("body").after("<div>挿入</div>");
});

iframe 要素を追加するには、

$(document).ready(function(){
	$("body").after('<iframe ' +
		'src="https://developer.mozilla.org/en/Gecko_DOM_Reference"' +
		'width="500" height="500" />');
});