0

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>
George Duckett
  • 31,770
  • 9
  • 95
  • 162
  • 2
    I suspect that this question might address the issues you're encountering: http://stackoverflow.com/questions/17700179/html5-define-own-void-tag – David Thomas May 21 '16 at 20:35

1 Answers1

1

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>
trincot
  • 317,000
  • 35
  • 244
  • 286