JSFiddle - React, Tailwind, and code Playground
HTML
<div id="myDiv"></div>
JavaScript
// Demonstration: Append a <p> tag to myDiv. The <p> will contain a <strong>
// tag followed by un-nested text.
Ext.DomHelper.append("myDiv", {
tag: "p",
children: [
{ tag: "strong", html: "To Do: " },
"Water the garden"
]
});
// By default, if you give a string as a child (as in the above example), Ext
// will insert the string as innerHTML. This is sometimes convenient, but it
// could open your application to cross-site scripting vulnerabilities. It is
// therefore recommended that you force Ext to create text nodes, as shown below.
var htmlString = "I contain <em>HTML</em>! <br />";
// Prior to safety check: write to innerHTML.
Ext.DomHelper.append("myDiv", htmlString);
// Force text node creation:
Ext.DomHelper.useDom = true;
// After safety check: all characters are displayed literally.
Ext.DomHelper.append("myDiv", htmlString);