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

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

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

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

JavaScript

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

Q&A

解決済

1回答

2562閲覧

innerHTMLから追加した子要素を取得できない

kyoshimi

総合スコア5

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2020/02/28 01:30

初心者です。基本的な問題かもしれず、申し訳ございません。

スクリプトを使用し、innerHTMLからlist-groupにlist-group-itemを追加し、querySelectorAllでそのlist-group-itemを取得しようとしましたが、空のNodeListが返ります。このlist-group-itemを取得する方法はありますでしょうか?

該当のソースコード

html

1<div class="list-group" id="playlist"> 2<!-- 3 <a href="../data/sound.xml" class="list-group-item"> 4 <i class="glpyhicon glyphicon-play"></i> 5 sound 6 </a> 7--> 8</div>

javascriptのソースコードは以下としました。

javascript

1function displayPlaylist(url) { 2 var output = []; 3 4 var request = new XMLHttpRequest(); 5 request.open("get", url, true); 6 request.send(null); 7 8 request.onload = function(e) { 9 var csvData = request.responseText; 10 var lines = csvData.split('\n'); 11 12 for (var i = 0; i < lines.length; i++) { 13 var wordSet = lines[i].split(","); 14 if (wordSet == "") { 15 continue; 16 } 17 output.push('<a href="../data/' + wordSet[0] + '.xml" class="list-group-item">', 18 '<i class="glpyhicon glyphicon-play"></i>', 19 wordSet[0], 20 '</a>'); 21 } 22 document.getElementById('playlist').innerHTML = output.join('\n'); 23 } 24} 25displayPlaylist('/data/info.csv') 26 27var parent = document.querySelector('#playlist') 28var links = document.querySelectorAll('#playlist a'); 29console.log(parent); 30console.log(links);

上記で入力としているinfo.csvは以下です。

sound sound1

###結果
console.log(parent);の出力

html

1<div class="list-group" id="playlist"> 2<a class="list-group-item" href="../data/sound.xml"> 3<i class="glpyhicon glyphicon-play"></i> 4sound 5</a> 6<a class="list-group-item" href="../data/sound1.xml"> 7<i class="glpyhicon glyphicon-play"></i> 8sound1 9</a> 10</div>

console.log(links);の出力

<NodeList length="0"></NodeList>

上記の通り、parentの出力にはaタグの子要素が入っているように見えますが、取得できませんでした。
なお、parentの出力をhtmlに直書きした場合は、NodeListに取得されます。

解決策をご教示いただけますと幸いです。

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

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

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

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

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

guest

回答1

0

ベストアンサー

順番を守れば普通にとれますね
ajaxの処理であればpromiseを使うか、処理を待ってから確認してください

投稿2020/02/28 01:58

編集2020/02/28 02:01
yambejp

総合スコア114585

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

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

yambejp

2020/02/28 01:59

<script> var html=` <a href="../data/sound.xml" class="list-group-item"> <i class="glpyhicon glyphicon-play"></i> sound </a>`; window.addEventListener('DOMContentLoaded', ()=>{ document.querySelector('.list-group').innerHTML=html; console.log(document.querySelectorAll('.list-group-item').length); }); </script> <div class="list-group" id="playlist"> </div>
yambejp

2020/02/28 02:17

fetch/async/awaitバージョン <script> window.addEventListener('DOMContentLoaded',async ()=>{ await fetch(url).then(res=>res.text()).then(html=>{ // htmlを加工して・・・ document.querySelector('.list-group').innerHTML=html; }); console.log(document.querySelectorAll('.list-group-item').length); }); </script> <div class="list-group" id="playlist"> </div>
kyoshimi

2020/02/28 04:48

有難うございます。取得することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問