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

Question

So I'm targeting my svg and its surrounding div:

const svg = e.target.parentElement;

Then I have ${svg} in the following context:

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

But I always get ${svg} as [object HTMLDivElement] . How would I get the svg to display as a string instead of an object?

Answer 1

parentElement is an HTML DOM Element Object .

When you inject it using the ${svg} , you actually call its toString() method, which returns the string [object HTMLDivElement] .

As suggested, if you'll use the outerHTML property of svg , you'll get the result you're expecting:

Reading the value of outerHTML returns a DOMString containing an HTML serialization of the element and its descendants