Question

我正在尝试制作媒体播放器。

我不确定为什么在我的HTML document.getElementById("#playlist-table");中，我对<table id="playlist-table"></table>的调用会返回null。我已经尝试在</body>标记之前运行脚本以确保DOM已准备就绪，但仍然没有运气。这是我的代码：

HTML （缩短）

  <!DOCTYPE html>
  <html lang="en"> 
    <head>
        <meta charset="utf-8"/>
        <title>JAMTRACKS</title>
        <script type="text/javascript" src="js.js"></script>
    </head>
    <body>
        <div id="media-player">
        <div id="playlist">
            <table id="playlist-table"></table>
        </div>
        </div>
    </body>
  </html>

JS （缩短）

  function addTrack(title){
    var table = document.getElementById("#playlist-table");
    var tr = document.createElement("tr");
    var titleTd = document.createElement("td");
    var titleNode = document.createTextNode("title");

    table.appendChild(tr);    //ERROR IS HERE

    tr.appendChild(titleTd);
    titleTd.appendChild(titleNode);
    ...
  }
  addTrack(Song_Name);

错误：未捕获的TypeError：无法读取属性＆＃39; appendChild＆＃39;为null

谢谢

Answer 1

从选择器

中删除主题标签#

var table = document.getElementById("playlist-table");

如果你想保留它，你应该使用querySelector()

document.querySelector('#playlist-table')

Answer 2

正确查询id的方法：

document.getElementById('foo');

或

document.querySelectorAll('#foo');

返回第一个元素：

document.querySelector('#foo');

Answer 3

^^

var table = document.getElementById（＆＃34; playlist-table＆＃34;）;

的document.getElementById（＆＃34;＃FOO＆＃34）;返回null

3 个答案: