☰

作成する 追加する 動的に質問する

tag-icon • tag-icon javascript
作成する 追加する 動的に質問する

<div>内部にを追加して、動的にを作成しようとしています<div>。 これまでのところ、これは動作します:

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

2 番目の div を作成して最初の div に追加するときに問題が発生します。

基本的に、最終的なマークアップとしてこれを実行したいと思います。

<div id="block" class="block">
   <div class="block-2"></div>
</div>

ベストアンサー1

同じプロセスを使用します。作成したiDiv元の要素を参照する変数がすでにあります。 別の変数を作成してを呼び出すだけです。<div id='block'><div>appendChild()

// Your existing code unmodified...
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

http://jsfiddle.net/W4Sup/1/

イベント作成の順序は、上記のとおりである必要はありません。innerDiv両方を に追加する前に、外側の div にnew を追加することもできます<body>。

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';

// Create the inner div before appending to the body
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

// Then append the whole thing onto the body
document.getElementsByTagName('body')[0].appendChild(iDiv);

おすすめ記事