2009年9月17日木曜日

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

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

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

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

element のメソッドには、

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

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);

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

を利用すれば良いと考えた。しかし、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 を使って書きたい。

要素を追加するために 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" />');
});