JSFiddle - React, Tailwind, and code Playground

HTML

<div>a : <span id="a"></span><br/>a = &lt;property akey="avalue">&lt;/property&gt;</div><br/>
<div>b : <span id="b"></span><br/>b = &lt;propert bkey="bvalue">&lt;/propert&gt;</div><br/>
<div>c : <span id="c"></span><br/>c = &lt;parent&gt;&lt;property ckey="cvalue"&gt;&lt;/property&gt;&lt;/parent&gt;</div><br/>
<div>d : <span id="d"></span><br/>d = &lt;parent&gt;&lt;propert dkey="dvalue"&gt;&lt;/propert&gt;&lt;/parent&gt;</div><br/>
<div>e : <span id="e"></span><br/>e = &lt;propert ekey="evalue"&gt;&lt;child eckey="ecvalue"&gt;&lt;/child&gt;&lt;/propert&gt;</div><br/>
<div>f : <span id="f"></span><br/>f = &lt;propert fkey="fvalue"&gt;&lt;child fckey="fcvalue"&gt;&lt;/child&gt;&lt;/propert&gt;</div><br/>

CSS

#a, #c, #e {
 color : red;   
}

JavaScript

var a = $("<root/>");
a.append($("<property/>").attr("akey", "avalue"));

$("#a").text(a.html());

var b = $("<root/>");
b.append($("<propert/>").attr("bkey", "bvalue"));

$("#b").text(b.html());

var c = $("<root/>");
c.append($("<parent/>").append($("<property/>").attr("ckey", "cvalue")));

$("#c").text(c.html());

var d = $("<root/>");
d.append($("<parent/>").append($("<propert/>").attr("dkey", "dvalue")));
 
$("#d").text(d.html());

var e = $("<root/>");
e.append($("<property/>").attr("ekey", "evalue").append($("<child/>").attr("eckey", "ecvalue")));
 
$("#e").text(e.html());

var f = $("<root/>");
f.append($("<propert/>").attr("fkey", "fvalue").append($("<child/>").attr("fckey", "fcvalue")));

$("#f").text(f.html());