document.getElementById("#foo"); returns null

document.getElementById("#foo"); returns null

本文关键字：quot returns null #foo document getElementById      更新时间：2023-09-26

我正在创建一个媒体播放器。

我不知道为什么我调用document.getElementById("#playlist-table");返回null时，我有在我的HTML <table id="playlist-table"></table>。我试着在</body>标签之前运行脚本，以确保DOM准备好了，但仍然没有运气。下面是我的代码:

(缩短)

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

错误: Uncaught TypeError: Cannot read property 'appendChild' of null

谢谢

从选择器中删除#标签

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

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

document.querySelector('#playlist-table')

查询id的正确方法:

document.getElementById('foo');

或

document.querySelectorAll('#foo');

返回第一个元素

document.querySelector('#foo');

^^

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

相关文章：