質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

2919閲覧

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

aconnect

総合スコア2

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/07/08 03:45

編集2021/07/08 09:11

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

<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++){

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

ベストアンサー

もちろんできます。
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

あ、できたんですね。
guest

0

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

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aconnect

2021/07/08 09:14

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

0

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

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

0

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

<!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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問