javascript - 有人可以向我解释 : appending elements to a target vs. 将元素分配给目标吗？

Question

我做了两个简单的函数，你可以在这个 link 中看到。。单击第一个按钮时，我创建一个 h3 元素，创建一些文本，将文本附加到元素中，然后将元素附加到名为 results 的 id 中。但是，当您单击第二个按钮时，我几乎做了同样的事情，除了我要求结果的 innerHTML 并将其分配给 h3 元素。但是，当我这样做时，我得到“[object HTMLHeadingElement]”。我想知道为什么我会得到这样的回应，尽管我觉得他们都在做同样的事情

HTML:

<button id="click">
Click 
</button>
<button id="click2">
Click 2
</button>
<div id="results">
Hello
</div>

Javascript:

document.getElementById('click').onclick = function()
{
 var a = document.createElement('h3');
 var b = document.createTextNode('This is some text!');
 a.appendChild(b);
 document.getElementById('results').appendChild(a);
}

document.getElementById('click2').onclick = function()
{
var a = document.createTextNode('This is some other text');
var b = document.createElement('h3');
var c = "";
b.appendChild(a);
c +=b

document.getElementById('results').innerHTML = c;

}

Answer 1

当您尝试将对象转换为字符串值时，其toPrimitive()方法将在内部调用，并返回对象的字符串表示形式。在我们的例子中，节点对象的字符串表示形式将是“[object HTMLHeadingElement]”。因此它被指定为 #results 元素的innerHTML。

最后，如果您想提取元素的原始 html 字符串，则必须访问其 outerHTML 属性。因此，您的情况的解决方案是获取所创建元素的 outerHTML 并将其分配给目标的 innerHTML。

document.getElementById('results').innerHTML = b.outerHTML;

你的完整代码是，

document.getElementById('click2').onclick = function() {
  var a = document.createTextNode('This is some other text');
  var b = document.createElement('h3');
  b.appendChild(a);
  document.getElementById('results').innerHTML = c.outerHTML;
}