人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: tomi99
●カテゴリ:ウェブ制作
✍キーワード:C-1 HTML js
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Sheile
●100ポイント ベストアンサー

「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を使っても

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


2 ● Sheile
●35ポイント

以下のような形であれば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側で記述が必要になりますよね。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ