初心者です。基本的な問題かもしれず、申し訳ございません。
スクリプトを使用し、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に取得されます。
解決策をご教示いただけますと幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/28 01:59
2020/02/28 02:17
2020/02/28 04:48