<div id="A">
<div id="B">
<div id="C-1"></div>
<div id="C-3"></div>
</div>
</div>
</body>
上記のC-1とC-3の間に
<div id="C-1"></div>
<div id="C-2">hogehogehoge</div>
<div id="C-3"></div>
というようにhtml「<div id="C-2">hogehogehoge</div>」を挿入したいのですが、htmlの方はいじらずに外部読み込みのjsのみを使って行う方法を教えて下さい。
No.1
45
16
100pt
「htmlをいじらない」という条件ですが、HTMLを変更せずにC-2の中身が変更できればOKでしょうか？
一応以下の形で、外部jsによって追加できるかと思います。
(Firefox3.01, IE6で動作確認）
<html> <head> <script language="JavaScript" src="test.js"></script> </head> <body> <div id="A"> <div id="B"> <div id="C-1">C1</div> <div id="C-3">C3</div> </div> </div> </body> </html>
function observe(target, type, listener) { if (target.addEventListener) target.addEventListener(type, listener, false); else target.attachEvent('on' + type, function() { listener.call(target, window.event); }); } observe(window, "load", function(e) { // C-2を作る var c2 = document.createElement("div") c2.id = "C-2"; c2.innerHTML = "hogehogehoge"; // C-3の前に追加 var c3 = document.getElementById("C-3"); c3.parentNode.insertBefore(c2, c3); });
このjsが読み込まれた時点ではC-1などが生成されていない為、C-2の追加は行わず、onloadイベントに「C-2を追加する関数」を追加します。
htmlの読み込みが終了した時点でonloadイベントが発生し、「C-2を追加する関数」が呼ばれます。
後はC-2を作成し（ここは必要に応じて変更を。）、C-3の前に追加します。
No.1
4516
ここでベストアンサー
100pt
「htmlをいじらない」という条件ですが、HTMLを変更せずにC-2の中身が変更できればOKでしょうか？
一応以下の形で、外部jsによって追加できるかと思います。
(Firefox3.01, IE6で動作確認）
<html> <head> <script language="JavaScript" src="test.js"></script> </head> <body> <div id="A"> <div id="B"> <div id="C-1">C1</div> <div id="C-3">C3</div> </div> </div> </body> </html>
function observe(target, type, listener) { if (target.addEventListener) target.addEventListener(type, listener, false); else target.attachEvent('on' + type, function() { listener.call(target, window.event); }); } observe(window, "load", function(e) { // C-2を作る var c2 = document.createElement("div") c2.id = "C-2"; c2.innerHTML = "hogehogehoge"; // C-3の前に追加 var c3 = document.getElementById("C-3"); c3.parentNode.insertBefore(c2, c3); });
このjsが読み込まれた時点ではC-1などが生成されていない為、C-2の追加は行わず、onloadイベントに「C-2を追加する関数」を追加します。
htmlの読み込みが終了した時点でonloadイベントが発生し、「C-2を追加する関数」が呼ばれます。
後はC-2を作成し（ここは必要に応じて変更を。）、C-3の前に追加します。
出来ました！完璧です。
分かりやすい説明を有り難うございます。
ちなみにdocument.writeを使っても
同じ事は出来るのでしょうか？
No.2
4516
35pt
以下のような形であればdocument.writeを使って実現できるかと思います。
ただ、この場合はHTMLの何処に挿入するか。というのが完全に固定になりますね。
<html> <head> </head> <body> <div id="A"> <div id="B"> <div id="C-1">C1</div> <script type="text/javascript" src="test2.js"></script> <div id="C-3">C3</div> </div> </div> </body> </html>
document.write("<div id=\"C-2\">hogehogehoge</div>");
document.writeを使うとやはりhtml側で記述が必要になりますよね。
何度もありがとうございました！
18
17
1
1
1
出来ました！完璧です。
分かりやすい説明を有り難うございます。
ちなみにdocument.writeを使っても
同じ事は出来るのでしょうか？