End tag is not formatted correctly when using innerHTML

The parser is not inserting even remotely accurate text.

For example, when I pass a div with the attribute class specified, its creating an end-tag with the class name. Is this by design? I am also noticing extra closing DIV’s being added where there is no need. The mark up I am inserting is simple and clean/well formed.

Any element with a class attribute automatically created a corresponding end tag such as:

</div class=“error-message”>

I understand innerHTML isn’t best practice, but I have even tried other methods and getting similar results. There is clearly something wrong with the parser.

I have triple checked everything to see why CSS was getting broken and on inspection, using the Developer Tools, it was clear something was happening to the mark-up being inserted which was not true to the original source.

Please fix.

On a simple test, it works fine. But on a slightly more complex layout it doesn’t. The test below works fine, but for some reason I can’t determine how using innerHTML is adding class attributes to end tags in my solution!

<!DOCTYPE html>
	<title>innerHTML Test</title>
let source;
let preview;
window.onload = function(){
	source = document.getElementById("source");
	preview = document.getElementById("preview");
	source.innerText = "<div class=\"test\">test</div>";
	source.oninput = function(){
		preview.innerHTML = source.innerText;

border:solid 1px #000;
border:solid 1px #000;


<div id="source" contenteditable="true">


<div id="preview"></div>


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.