javascriptで要素の中に要素を追加したい　dom

やりたいことはリンク付きのリストを表示することで、

<div id="box><div>の中にulを入れて、liを入れて、さらにaを入れるということをやりたいのですが下記のコードだと、boxに単体で入れるだけでul→li→aという流れになりません。

要素の中に要素、さらに要素をということはできるのでしょうか？

javascript
1<body>
2        <h1>課題1</h1>
3        <div id="box"></div>
4        <script>
5            let ul_element = document.createElement('ul');
6           
7            let li_element = document.createElement('li');
8            // element.id = 'listInner'
9            let a_element = document.createElement('a');
10            a_element.innerHTML = 'google';
11            a_element.href = 'https://google.com';
12            
13            let box_element = document.getElementById('box');
14            box_element.appendChild(ul_element);
15            
16            
17            // box_element.appendChild(li_element);
18            
19        </script>
20    </body>

##　編集後

javascript
1<body>
2        <h1>課題1</h1>
3        <div id="box"></div>
4       <script>
5            let ul_element = document.createElement('ul');
6            let li_element = document.createElement('li');
7            
8            let aGoogle_element = document.createElement('a');
9            aGoogle_element.innerHTML = 'google';
10            aGoogle_element.href = 'https://google.com';
11            
12            let aYahoo_element = document.createElement('a');
13            aYahoo_element.innerHTML = 'Yahoo';
14            aYahoo_element.href = 'https://yahoo.com';
15            
16            let aBing_element = document.createElement('a');
17            aBing_element.innerHTML = 'Bing';
18            aBing_element.href = 'https://bing.com';
19            
20            let box_element = document.getElementById('box');
21            box_element.appendChild(ul_element);
22            ul_element.appendChild(li_element);
23            li_element.appendChild(aGoogle_element);
24　　　　　　li_element.appendChild(aYahoo_element);
25　　　　　　li_element.appendChild(aBing_element);
26            
27        </script>
28    </body>

for文で3つまで増やそうとしたところリンクが3つ並んだものが3つになるという始末です。
for(let i = 1; i <= 5; i++){

行動規範の内容に同意します

回答4件

ベストアンサー

もちろんできます。
appendChildで追加した子要素に対して別の要素をappendChildすれば孫になります。

なお、複雑な構造をドキュメントに追加する場合、一旦 DocumentFragment オブジェクトを作ってそこにDOMツリーを構築し、最終的にそれをドキュメントに対して追加する方法を取るのがスマートです。

こちらが参考になると思います。

JavaScript | 複数のノードをまとめて追加(DocumentFragment)

投稿2021/07/08 03:56

itagagaki

総合スコア8402

aconnect

2021/07/08 04:03

詳しくご回答ありがとうございます。子要素の子要素という具合にも可能なのですね。参考資料も大変助かります。こちらで試してみたいと思います。

aconnect

2021/07/08 09:07

教えていただいた方法で成功しました！ただまた説明不足で申しわけないのですが、liを複数作成し中身を異なるものにしたい場合どうすればよいでしょう？追記にも書いたのですが、li1つにaが3つになったりとおかしな状況に・・・

itagagaki

2021/07/08 10:06

編集後のコードでは li_element に3つのa要素を追加しているので当然そうなりますね。やりたいことは、たとえば let li_Google_element = document.createElement('li'); li_Google_element.appendChild(aGoogle_element); ul_element.appendChild(li_Google_element); let li_Yahoo_element = document.createElement('li'); li_Yahoo_element.appendChild(aYahoo_element); ul_element.appendChild(li_Yahoo_element); let li_Bing_element = document.createElement('li'); li_Bing_element.appendChild(aBing_element); ul_element.appendChild(li_Bing_element); というようなことではないですか？まあ3つくらいならこんな風に書いてもいいと思いますけど、配列にしてループで処理するのがスマートでしょうね。そのへんはもしまだ未学習なら勉強してみてください。

itagagaki

2021/07/08 10:08

あ、できたんですね。

行動規範の内容に同意します

DOMっぽく

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  document.getElementById('box').appendChild([[Object.assign(document.createElement('a'),{textContent:'google',href:'https://google.com'})].reduce((x,y)=>(x.appendChild(y),x),document.createElement('li'))].reduce((x,y)=>(x.appendChild(y),x),document.createElement('ul')));
4});
5</script>
6<div id="box"></div>

投稿2021/07/08 04:22

yambejp

総合スコア116724

aconnect

2021/07/08 09:14

ご回答ありがとうございます。自分にはまだそこまでの知識がなく理解できず大変恐縮です。もう少し理解が深まりましたら読み込んでいきたいと思います。

行動規範の内容に同意します

Javascript
1        const box = document.getElementById("box");
2        box.insertAdjacentHTML("afterbegin", "<ul><li><a href='https://google.com'>google</a></li></ul>");
3

投稿2021/07/08 03:52

編集2021/07/08 04:06

Jon_do

総合スコア1373

aconnect

2021/07/08 04:02

ご回答ありがとうございます。私の説明不足で、リンクが機能しませんでした。他の方法も試してみたいと思います。

Jon_do

2021/07/08 04:07

コードを修正しました。

aconnect

2021/07/08 08:35

修正ありがとうございます。見やすく簡潔なコードで大変勉強になります。ぜひ使用させていただきます。

行動規範の内容に同意します

余分なコードも多々あるかもしれないのですが、一応自分の考えていた通りにできましたので貼り付けておきます。何かの参考になれば幸いです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>課題</title>
    </head>
    <body>
        <h1>課題1</h1>
        <div id="box"></div>
        <script>
            let ul_element = document.createElement('ul');
            let li01_element = document.createElement('li');
            let li02_element = document.createElement('li');
            let li03_element = document.createElement('li');
            
            let aGoogle_element = document.createElement('a');
            aGoogle_element.innerHTML = 'google';
            aGoogle_element.href = 'https://google.com';
            
            let aYahoo_element = document.createElement('a');
            aYahoo_element.innerHTML = 'Yahoo';
            aYahoo_element.href = 'https://yahoo.com';
            
            let aBing_element = document.createElement('a');
            aBing_element.innerHTML = 'Bing';
            aBing_element.href = 'https://bing.com';
            
            let box_element = document.getElementById('box');
            box_element.appendChild(ul_element);
            ul_element.appendChild(li01_element);
            li01_element.appendChild(aGoogle_element);
            ul_element.appendChild(li02_element);
            li02_element.appendChild(aYahoo_element);
            
            ul_element.appendChild(li03_element);
            li03_element.appendChild(aBing_element);
            
        </script>
    </body>
</html>

投稿2021/07/08 09:22

aconnect

総合スコア2