JSFiddle - React, Tailwind, and code Playground

by Helder da Rocha

HTML

<div id="container"></div>

<p>
<button onclick="alter()">set .innerHTML</button>
<button onclick="alert(document.getElementById('container').innerHTML)">get .innerHTML</button>
</p>

CSS

#container {
    width: 100px; 
    height: 100px;
}

JavaScript

alter = function () {
    var div = document.getElementById('container');
    div.innerHTML   = '<svg><rect width="100" height="60" fill="green" />'
                    + '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
                    + '<text x="15" y="20" fill="white">hello world</text>'
                    + '<g transform="translate(0, 70)">'
                    + '<rect width="100" height="20" fill="yellow" /></g></svg>';
}