CODEWITHSUNDEEP
javascripthtmldom-manipulation
Hodiya Eyal
Hodiya Eyal

Reputation: 63

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

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.

Upvotes: 1

Views: 1009

Answers (3)

Robo Robok
Robo Robok

Reputation: 22693

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
    )
]);

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370789

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 createElements / appendChilds. 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.

Upvotes: 1

Adrian Solarczyk
Adrian Solarczyk

Reputation: 247

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

Upvotes: 0

Related Questions