Question

我在选择动态添加的元素时遇到问题，每个元素都有动态定义的ID;使用getElemendById时脚本始终返回null。

我希望脚本首先检查，如果DOM中已存在具有特定ID的元素，如果不存在 - 创建一个，如果存在 - 执行其他操作。

我的代码如下所示：

document.addEventListener('DOMContentLoaded', function () {
  //define variables
  var playersOnField = document.querySelector('.players');

  //using timeBar as indicator of current time frame
  var timeBar = document.querySelector('#time');

  //its maximum value needs to be adjusted to the number of the frames we have
  timeBar.setAttribute("max", data.player_positions.length);


  //display the players position for current frame
  positionPlayers = function() {
    time = timeBar.value;
    currentFrame = data.player_positions[time];
    //check if DOM element representing each player of current frame already exists, if not - create it
    for (var i = 0; i < currentFrame.length; i++) {
      var playerId = currentFrame[i][0];
      //ID's start with number, so they require special unicode notation
      if (!!document.getElementById(`#\\3${playerId} `) == false) {
        console.log('no element, let\'s create one');
        var newPlayer = document.createElement('div');
        newPlayer.id = `${playerId}`;
        playersOnField.appendChild(newPlayer);
      } else {
        console.log('element already exists!');
      }
    }
  }

  //every time the bar changes its postion (and therefore its value) it should trigger the action to set up the players in the current position on the field
  timeBar.addEventListener('change', positionPlayers);
  timeBar.addEventListener('input', positionPlayers);

})

但是该函数总是返回false，并且创建具有相同ID的几十个div，因为getElementById永远不会找到任何新附加的元素。我怎样才能避免这种情况发生，最好使用vanilla JS？

Answer 1

您正在测试的id字符串中似乎有一个额外的空格。由于#{...}是一个评估值，因此它不应该在引号中。

另外，为什么在这里使用反向标记字符串语法？

if (!!document.getElementById(`#\\3${playerId} `) == false) {

并且，getElementById()已经知道要查找ID，因此添加#将会搜索实际上以#开头的元素。

最后，如果具有id的元素确实存在，它将返回一个“truthy”值，当转换为布尔值时，将转换为true，因此不需要强制布尔转换（使用!!），然后检查是否为false。

该行可以改写为：

if (!document.getElementById(${playerId})) {

JavaScript - 动态添加元素的getElementById

1 个答案: