JSFiddle - React, Tailwind, and code Playground
HTML
<div id="theDiv1">
</div>
<div id="theDiv2">
</div>
<div id="theDiv3">
</div>
<div id="theDiv4">
</div>
<div><label for="anInput1">Simplest 1 - direct string</label><input type="text" id="anInput1"/></div>
<div><label for="anInput2">Simplest 2 - stringified string</label><input type="text" id="anInput2"/></div>
<div><label for="anInput3">Simplest 3 - double backslash string</label><input type="text" id="anInput3"/></div>
JavaScript
function aUniqueID () {
return(Date.now() + Math.floor(Math.random * 1000));
}
class anEntryString {
constructor(aValue, anAnchor, aLabel) {
this.element = document.createElement("input");
this.element.type = "text";
this.element.id = aUniqueID();
this.label = document.createElement("label");
this.label.htmlFor = this.element.id;
this.label.innerHTML = aLabel;
this.element.value=aValue;
anAnchor.append(this.label);
anAnchor.append(this.element);
}
}
class anEntryStringified {
constructor(aValue, anAnchor, aLabel) {
this.element = document.createElement("input");
this.element.type = "text";
this.element.id = aUniqueID();
this.label = document.createElement("label");
this.label.htmlFor = this.element.id;
this.label.innerHTML = aLabel;
this.element.value=stringAndStrip(aValue);
anAnchor.append(this.label);
anAnchor.append(this.element);
}
}
class anEntryJSONnoEscape {
constructor(aValue, aReference, anAnchor, aLabel) {
this.element = document.createElement("input");
this.element.type = "text";
this.element.id = aUniqueID();
this.label = document.createElement("label");
this.label.htmlFor = this.element.id;
this.label.innerHTML = aLabel;
this.element.value=aValue[aReference];
anAnchor.append(this.label);
anAnchor.append(this.element);
}
}
class anEntryJSONwithEscape {
constructor(aValue, aReference, anAnchor, aLabel) {
this.element = document.createElement("input");
...