<body>

<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のみを使って行う方法を教えて下さい。

回答の条件
  • 1人2回まで
  • 登録:2008/08/04 08:08:01
  • 終了:2008/08/04 18:54:40

ベストアンサー

id:sheile No.1

Sheile回答回数45ベストアンサー獲得回数162008/08/04 11:04:40

ポイント100pt

「htmlをいじらない」という条件ですが、HTMLを変更せずにC-2の中身が変更できればOKでしょうか?

一応以下の形で、外部jsによって追加できるかと思います。

(Firefox3.01, IE6で動作確認)

  • test.html
<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>
  • test.js
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の前に追加します。

id:tomi99

出来ました!完璧です。

分かりやすい説明を有り難うございます。

ちなみにdocument.writeを使っても

同じ事は出来るのでしょうか?

2008/08/04 11:48:00

その他の回答(1件)

id:sheile No.1

Sheile回答回数45ベストアンサー獲得回数162008/08/04 11:04:40ここでベストアンサー

ポイント100pt

「htmlをいじらない」という条件ですが、HTMLを変更せずにC-2の中身が変更できればOKでしょうか?

一応以下の形で、外部jsによって追加できるかと思います。

(Firefox3.01, IE6で動作確認)

  • test.html
<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>
  • test.js
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の前に追加します。

id:tomi99

出来ました!完璧です。

分かりやすい説明を有り難うございます。

ちなみにdocument.writeを使っても

同じ事は出来るのでしょうか?

2008/08/04 11:48:00
id:sheile No.2

Sheile回答回数45ベストアンサー獲得回数162008/08/04 12:01:25

ポイント35pt

以下のような形であればdocument.writeを使って実現できるかと思います。

ただ、この場合はHTMLの何処に挿入するか。というのが完全に固定になりますね。

  • test.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>
  • test2.js
document.write("<div id=\"C-2\">hogehogehoge</div>");
id:tomi99

document.writeを使うとやはりhtml側で記述が必要になりますよね。

何度もありがとうございました!

2008/08/04 18:53:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません