George Duckett George Duckett - 6 months ago 11
Javascript Question

void custom element being altered when calling parentelement.innerHTML to get the DOM

I am using javascript to transform the DOM, which includes a custom tag (that I can't control the name of).
I then call

innerHTML
on the parent element to get the transformed DOM as a string. My issue is that the simply doing this the DOM changes, I'm assuming because of the custom tag.

See below for a minimal example. Ignore the extra script bit that gets added by the snippet plumbing, the point is that the pagebreak tag now wraps
test
.

How can I prevent this, and preserve the DOM while going through an
innerHTML
call?



console.log(document.getElementsByTagName('body')[0].innerHTML);

<html>
<body>
<mbp:pagebreak />test
</body>
</html>




Answer

A custom element is non-void, and so you should specify a closing tag, like this:

console.log(document.getElementById('test').innerHTML);
<div id="test">
    <mbp:pagebreak></mbp:pagebreak>test
</div>