有人能向我解释一下:将元素附加到目标与将元素分配到目标

Can someone explain to me: appending elements to a target vs. assigning elements to a target?

本文关键字：元素 目标 分配 一下 解释      更新时间：2023-09-26

我制作了两个简单的函数，您可以在这个链接中看到。当单击第一个按钮时，我创建一个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;
}

当您尝试将object转换为string值时，其toPrimitive()方法将在内部调用，并返回object的字符串表示。在我们的例子中，节点对象的字符串表示将是"[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;
}
相关文章：