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

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

从技术上讲，可以将值插入 HTML 标记内，而不是事后选择元素并设置它们.value，但它不太安全：

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>

如果这些值不可信，则可能允许执行任意代码。

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

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

基本上做同样的事情