使用 JS 将容器添加到 HTML 页面的最佳方法？

Question

我正在寻找一种方法将这些带有 JS 的代码行添加到我的 HTML 网页中：

        <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>

我的方法是添加这些代码行：

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;

});

我是 JS 新手，我想知道是否有更短的方法来添加我的整个“div 容器”？感谢各位的帮助。

Answer 1

考虑使用静态 CSS 而不是属性 - 这大大减少了脚本所需的 JavaScript，并且更加优雅。createElement您只需编写 HTML 标记即可创建 DOM，这比大量的s/ appendChilds容易得多。通过分配给容器的innerHTML. 然后选择其中需要值的元素querySelectorAll，并分配给它们的.value属性：const cell = document.getElementById("rows").appendChild(document.createElement("div"));cell.innerHTML = `<div>&nbsp; <div>&nbsp; &nbsp; <textarea></textarea>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <input>&nbsp; &nbsp; <input>&nbsp; </div></div>`;const [textarea, dateinput, timeinput] = cell.querySelectorAll('textarea, input');textarea.value = 'mission.text';dateinput.value = 'mission.date';timeinput.value = 'mission.time';#rows > div {&nbsp; display: table-cell;}#rows > div > div {&nbsp; display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;"}#rows textarea {&nbsp; border: unset; background: unset; resize: unset; width: 80%; height: 60%; margin-top: 20px; margin-left: 17px; padding: 10px;}<div id="rows"></div>从技术上讲，可以将值插入 HTML 标记内，而不是事后选择元素并设置它们.value，但它不太安全：const cell = document.getElementById("rows").appendChild(document.createElement("div"));cell.innerHTML = `<div>&nbsp; <div>&nbsp; &nbsp; <textarea>${'mission.text'}</textarea>&nbsp; </div>&nbsp; <div>&nbsp; &nbsp; <input value="${'mission.date'}">&nbsp; &nbsp; <input value="${'mission.time'}">&nbsp; </div></div>`;#rows > div {&nbsp; display: table-cell;}#rows > div > div {&nbsp; display: inline-block; width: 270px; height: 270px; background: url(yellowNote.jpg); background-repeat: no-repeat; background-size: cover;"}#rows textarea {&nbsp; border: unset; background: unset; resize: unset; width: 80%; height: 60%; margin-top: 20px; margin-left: 17px; padding: 10px;}<div id="rows"></div>如果这些值不可信，则可能允许执行任意代码。

Answer 2

您可以使用辅助函数：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;}这样，您可以更自然地嵌套元素，如下所示：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    )]);

Answer 3

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