Don't use `innerHTML`

Hello!

innerHTML usually can be very safe as long as it's not dealing with content that users can manipulate. For example, any content that resides inside your code should be safe. As mentioned, setHTML still doesn't have a great support. But there are great options.

For example, if you don't need to inject or get any HTML you could use the innerText property, so if you try to inject a tag it will place instead a plain text.

If you actually need to inject HTML that could contain user added data, for example, from an input, there are great libraries to sanitize that content such as DOMPurify.

More on all this:

• How to sanitize HTML strings with vanilla JS to reduce your risk of XSS attacks
• Injecting text instead of HTML with vanilla JS to reduce your risk of XSS attacks

Also, you should consider creating longer posts with more content because this might go against the Web Site Terms and Conditions of Use, read section 11. However, one great option that DEV provides is that whenever you create a post, you can provide a link to where you originally published it:

Hope all of this helps you! And by the way, thanks for sharing the setHTML property, I didn't know about this, if it ever got a great browser support it will be very useful.

For the setHTML(<value>) you can check Can I use this will show total browser support.

There is chrome support, but no Firefox, Safari, and lots of smaller browsers.
Instead maybe a JavaScript package could be used for now.

I think u can also use appendChild() instead of innerHTML in plain JS

here is a snippet from one of my apps but u will need to play around with it for ur own use
<div class="chart" id="navContainer" style='width: 500px; height: 500px;'>
</div>
var original_div = document.getElementById('navContainer');
    //old way was.. var original_div = document.getElementById('navContainer').innerHTML;
<script>
      // create a div object on the fly called new_div (will only work inside javascript)
var new_div = document.createElement('div');
      //give it some body plus attributes
new_div.style.width = "500px";
new_div.style.height = "500px"; //needs height attribute
new_div.setAttribute("id", "navContainer"); //adding id and class
new_div.setAttribute("class", "chart"); //set attribute
      // and give it some content
var newContent = document.createTextNode("Hi there and greetings!");
      // add the text node to the newly created div
new_div.appendChild(newContent);

      //finally append newly created div to original div
original_div.appendChild(new_div);
</script>