Question

我有这段代码：

<ul id="ul"></ul>
<script>
    var playlist = document.getElementById('ul');

    var li = document.createElement('li');
    li.innerHTML = 'innerHTML';
    playlist.appendChild(li);

    console.log(playlist.children[0] === li); // true

    playlist.innerHTML += 'some text';

    console.log(playlist.children[0] === li); // false
    console.log(playlist.children[0]); // <li>innerHTML</li>
    console.log(li); // <li>innerHTML</li>
</script>

奇怪的是，当第一次比较返回true时，在添加了一些文字后，它就不再相等了。这是为什么？这是一个错误，还是预期的行为？有没有办法让第二次测试返回true？

Answer 1

那是因为你正在修改innerHTML属性。之后，浏览器会创建另一个li元素，并且由于每个对象都是唯一的，因此生成的li元素不等于之前的li元素。您可以附加textNode而不是修改innerHTML属性：

playlist.appendChild(document.createTextNode('some text'));

Answer 2

innerHTML的使用使浏览器解析并重新生成DOM。新创建的对象不是同一个对象，尽管它们的内容可能相同。

当您使用console.log(li)或console.log(playlist.children[0])时，浏览器会将对象转换为可以显示的文本表示形式，它们会显示相同的文本，但它们不是同一个对象。

有一个技巧可以使比较返回true：

console.log(""+playlist.children[0] == ""+li); // always return true

它的作用是在比较对象之前将对象隐式转换为字符串。然后，你声称的结果字符串是相同的（但不是它们来自的原始对象）。

如果您在innerHTML级别进行比较，则它们也相同：

console.log(playlist.children[0].innerHTML == li.innerHTML); // always return true

添加内容时重新定义元素

2 个答案: