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>
<head>
<title>innerHTML Test</title>
<script>
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;
}
}
</script>
<style>
.test{
background-color:red;
color:white;
padding:30px;
}
#source{
width:500px;
height:200px;
border:solid 1px #000;
}
#preview{
width:500px;
height:200px;
border:solid 1px #000;
}
</style>
</head>
<body>
<div id="source" contenteditable="true">
</div>
<div id="preview"></div>
</body>
</html>