如何在innerHTML中将对象作为字符串获取？

Question

所以我的目标是svg及其周围的div：

const svg = e.target.parentElement;

然后在以下情况下我有${svg}：

result.innerHTML = <h1 class="text-win">You won</h1> <div class="result"> ${svg} </div>

但是我总是以${svg}的身份获得[object HTMLDivElement]。我如何使svg显示为字符串而不是对象？

Answer 1

parentElement是 HTML DOM元素 Object 。

使用${svg}注入它时，实际上调用了它的toString()方法，该方法返回字符串[object HTMLDivElement]。

如建议的那样，如果您使用svg的{​​{3}}属性，则会得到期望的结果：

  

读取outerHTML的值将返回一个DOMString，其中包含元素及其后代的HTML序列化