The best way to add a container to a HTML page with JS?

Question

I'm looking for a way to add those lines of codes with JS to my HTML webpage:

        <div id="cell" style="display: table-cell;">
            <div style=" display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;">
                <textarea id="ff" style="border: unset; background: unset; resize: unset; width: 80%; height: 60% ; margin-top: 20px; margin-left: 17px; padding: 10px;"></textarea>
                <div style="display:inline-block;">
                <input id="mr"  type="date">
                <input id="mc"  type="time">
                </div>
            </div>
        </div>

My way was to add those lines of code:

var cell = document.createElement("div");
var design = document.createElement("div");
var texare = document.createElement("textarea");
var inputsdiv = document.createElement("div");
var dateinput = document.createElement("input");
var timeinput = document.createElement("input");


var tableCell = document.createAttribute("style");
var styledesign = document.createAttribute("style");
var textareastyle = document.createAttribute("style");
var inputsdivstyle = document.createAttribute("style");
var datestyle = document.createAttribute("type");
var timestyle = document.createAttribute("type");

tableCell.value="display: table-cell;";
styledesign.value = " display: inline-block; width: 270px; height: 270px; background: 
url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;";
textareastyle.value = "border: unset; background: unset; resize: unset; width: 80%; height: 60% ; 
margin-top: 20px; margin-left: 17px; padding: 10px;"
inputsdivstyle.value = "display:inline-block;"
datestyle.value="date";
timestyle.value = "time";

cell.setAttributeNode(tableCell);
design.setAttributeNode(styledesign);
texare.setAttributeNode(textareastyle);
texare.value = mission.text;
dateinput.value = mission.date;
timeinput.value = mission.time;

inputsdiv.appendChild(dateinput);
inputsdiv.appendChild(timeinput);
design.appendChild(texare);
design.appendChild(inputsdiv);
cell.appendChild(design);
document.getElementById("rows").appendChild(cell);
});

I'm new to JS and I want to know if there is a shorter way to add my whole "div container" ? Thanks for the helpers.

Answer 1

Consider using static CSS instead of attributes - that drastically reduces the Javascript necessary for your script, and is much more elegant.

You can create the DOM by just writing the HTML markup, which is a lot easier than lots of createElement s / appendChild s. Insert it into the DOM by assigning to the container's innerHTML . Then select the elements inside it which need values with querySelectorAll , and assign to their .value properties:

 const cell = document.getElementById("rows").appendChild(document.createElement("div")); cell.innerHTML = ` <div> <div> <textarea></textarea> </div> <div> <input> <input> </div> </div> `; const [textarea, dateinput, timeinput] = cell.querySelectorAll('textarea, input'); textarea.value = 'mission.text'; dateinput.value = 'mission.date'; timeinput.value = 'mission.time';

 #rows > div { display: table-cell; } #rows > div > div { display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;" } #rows textarea { border: unset; background: unset; resize: unset; width: 80%; height: 60%; margin-top: 20px; margin-left: 17px; padding: 10px; }

 <div id="rows"></div>

It's technically possible to insert the values inside the HTML markup, instead of selecting the elements afterwards and setting their .value , but it's less safe:

 const cell = document.getElementById("rows").appendChild(document.createElement("div")); cell.innerHTML = ` <div> <div> <textarea>${'mission.text'}</textarea> </div> <div> <input value="${'mission.date'}"> <input value="${'mission.time'}"> </div> </div> `;

 #rows > div { display: table-cell; } #rows > div > div { display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;" } #rows textarea { border: unset; background: unset; resize: unset; width: 80%; height: 60%; margin-top: 20px; margin-left: 17px; padding: 10px; }

 <div id="rows"></div>

If the values aren't trustworthy, it could allow for arbitrary code execution.

Answer 2

Basically

var cell = document.createElement("div")
cell.innerHTML = `
           <div style=" display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;">
               <textarea id="ff" style="border: unset; background: unset; resize: unset; width: 80%; height: 60% ; margin-top: 20px; margin-left: 17px; padding: 10px;"></textarea>
               <div style="display:inline-block;">
               <input id="mr"  type="date">
               <input id="mc"  type="time">
               </div>
           </div>`

does basically same thing

Answer 3

You can use a helper function (credits for "Eloquent Javascript" book by Marijn Haverbeke ):

function elt(name, attrs, ...children) {
    let dom = document.createElement(name);
    for (let attr of Object.keys(attrs)) {
        dom.setAttribute(attr, attrs[attr]);
    }
    for (let child of children) {
        dom.appendChild(child);
    }
    return dom;
}

This way, you can nest elements more naturally, like so:

const table = elt('div', {id: 'cell', style: 'display: table-cell;'}, [
    elt('div', {style: '...'},
        elt('textarea', {id: 'ff', style: '...'}),
        elt('div', {style: 'display:inline-block;'}),
        // other children
    )
]);