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

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

我是JS的新手，我想知道是否有一种较短的方法来添加我的整个“ div容器”？感谢您的帮手。

Answer 1

基本

Answer 2

考虑使用静态CSS而不是属性-大大减少了脚本所必需的Javascript，和

Answer 3

您可以使用助手功能（"Eloquent Javascript" book by Marijn Haverbeke的积分：]