JavascriptのDOMについて

htmlに

<div id="objId1"></div>

があり　これを　DOMで

<div>
__<div>
____<div>
______<ul>
________<li></li>
________<li></li>
________<li></li>
________<li></li>
________<li id="objId2"></li>
______</ul>
____</div>
__</div>
</div>

のような　htmlを作りたいと考えています。

document.getElementById('objId1').innerHTML = '<div><div><div><ul><li></li><li></li><li></li><li></li><li id="objId2"></li></ul></div></div></div>';

というようにするのは無しで　一つづつDOMで作っていく方法を教えてください。
お手数ですが　よろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2018/02/09 09:01

こんにちは

要素を生成するには、createElement()
https://developer.mozilla.org/ja/docs/Web/API/Do …

これをDOMに組み入れるのには、appendChild()など
https://developer.mozilla.org/ja/docs/Web/API/No …

を利用なさればよろしいかと。

この回答へのお礼

回答ありがとうございます。

いろいろ調べて確認していきます。

お礼日時：2018/02/09 20:39

No.4 回答者： yambejp 回答日時： 2018/02/10 14:36

window.addEventListener('DOMContentLoaded', function(e){

・・・
});

は、HTMLがロードされて描画後に実行されます
一方ご提示の
document.getElementById("objId2").innerHTML = 'Pos2'; // add
については、その外側で実行されているので、その部分が読まれた時点で
実行されているのでPos2のあとにPos1が実行されていることになります
さらに言えば、その時点でobjId2は作成されていないので、
Pos2を設定しようとするとエラーが発生しています。
コンソールで状況を確認すると良いでしょう

No.3 回答者： yambejp 回答日時： 2018/02/09 13:27

こんな感じで

<script>
window.addEventListener('DOMContentLoaded', function(e){
var n0=document.querySelector('#objId1');
var n1=document.createElement('div');
var n2=document.createElement('div');
var n3=document.createElement('div');
var n4=document.createElement('ul');
var n5=document.createElement('li');
var n6=n5.cloneNode();
n6.setAttribute('id','objId2');
n0.appendChild(n1);
n1.appendChild(n2);
n2.appendChild(n3);
n3.appendChild(n4);
n4.appendChild(n5);
n4.appendChild(n5.cloneNode());
n4.appendChild(n5.cloneNode());
n4.appendChild(n5.cloneNode());
n4.appendChild(n6);
});
</script>


<div id="objId1"></div>

この回答へのお礼

回答ありがとうございます。

スマートなソースではありますが、かつ、ベタなのでとてもわかり易いです。

ちょっと、足して確認しました。

すると「Pos1」

が表示されました。

<script>
window.addEventListener('DOMContentLoaded', function(e){
_ _ var n0=document.querySelector('#objId1');
_ _ var n1=document.createElement('div');
_ _ var n2=document.createElement('div');
_ _ var n3=document.createElement('div');
_ _ var n4=document.createElement('ul');
_ _ var n5=document.createElement('li');
_ _ var n6=n5.cloneNode();
_ _ n6.setAttribute('id','objId2');
_ _ n0.appendChild(n1);
_ _ n1.appendChild(n2);
_ _ n2.appendChild(n3);
_ _ n3.appendChild(n4);
_ _ n4.appendChild(n5);
_ _ n4.appendChild(n5.cloneNode());
_ _ n4.appendChild(n5.cloneNode());
_ _ n4.appendChild(n5.cloneNode());
_ _ n4.appendChild(n6);
_ _ console.log(n0); // add
_ _ n6.innerHTML = 'Pos1'; // add
_ _ console.log(n0); // add
_ _ console.log(n6); // add
});

document.getElementById("objId2").innerHTML = 'Pos2'; // add
</script>

<div id="objId1"></div>

お礼日時：2018/02/09 20:22

No.2 回答者： Ogre7077 回答日時： 2018/02/09 11:56

DOM をそのまま使うと面倒が多いので、

最近流行の仮想 DOM の様に作ってはいかがでしょうか。

var make = function(vdom){
_ var E = function(n,_){
_ _ var x = (typeof n=='string')? document.createElement(n): n;
_ _ var a = arguments;
_ _ for (var i=1; i<a.length; i++) {
_ _ _ var o = a[i];
_ _ _ if (o instanceof HTMLElement) x.appendChild(o);
_ _ _ else if (o instanceof Array) x.appendChild(E.apply(null,o));
_ _ _ else if (typeof o=='object') for (var i in o) x.setAttribute(i,o[i]);
_ _ _ else x.appendChild(document.createTextNode(o));
_ _ }
_ _ return x;
_ };
_ return E.apply(null, vdom);
};

var elem = make(
_ ['div',
_ _ ['div',
_ _ _ ['div',
_ _ _ _ ['ul',
_ _ _ _ _ ['li','われ','われ'],
_ _ _ _ _ ['li','は'],
_ _ _ _ _ ['li','うちゅ','じん'],
_ _ _ _ _ ['li','で'],
_ _ _ _ _ ['li','ある',{id:'objId2'}]
_ _ _ _ ],
_ _ _ ],
_ _ ],
_ ]
);
document.getElementById('objId1').appendChild(elem);

この回答へのお礼

これは便利そうですね。

繰り返し使えそうなところがよそげな感じです。
使うと思います。

お礼日時：2018/02/09 20:37