为什么我的代码中出现`div.setAttribute不是函数`错误？

Question

我收到错误:

div.setAttribute不是一个函数

在以下代码段中:

FriendlyChat.prototype.displayMessage = function(key, name, text, picUrl, imageUri) {
  console.log('FriendlyChat.prototype.displayMessage');
  var div = document.getElementById(key);
  // If an element for that message does not exists yet we create it.
  if (!div) {
    var container = document.createElement('div');
    container.innerHTML = FriendlyChat.MESSAGE_TEMPLATE;
    div = container.firstChild;
    div.setAttribute('id', key);
    this.messageList.appendChild(div);
  }
  if (picUrl) {
    div.querySelector('.pic').style.backgroundImage = 'url(' + picUrl + ')';
  }
  div.querySelector('.name').textContent = name;
  var messageElement = div.querySelector('.message');
  if (text) { // If the message is text.
    messageElement.textContent = text;
    // Replace all line breaks by <br>.
    messageElement.innerHTML = messageElement.innerHTML.replace(/\n/g, '<br>');
  } 
};

只要调用上述函数,就会发生错误.我不知道代码有什么问题.

为什么会出现错误？

Answer 1

container.firstChild返回其中的第一个子节点container,该节点可能不是元素(可以是文本节点,注释等).如果它不是一个元素,它就不会有setAttribute.如果你想要第一个元素子,请使用firstElementChild.

旁注:id是一个反射属性,所以你可以写div.id = key;而不是div.setAttribute("id", key);.他们做同样的事情.(许多属性都是如此,但不是全部; value在input元素上是一个主要的例外,它不是value属性的访问者.)