我正在尋找一種方法將這些帶有 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 容器”？感謝各位的幫助。
3 回答
烙印99
TA貢獻1829條經驗 獲得超13個贊
考慮使用靜態 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>
如果這些值不可信，則可能允許執行任意代碼。
楊__羊羊
TA貢獻1943條經驗 獲得超7個贊
您可以使用輔助函數：
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
? ? )
]);
蝴蝶刀刀
TA貢獻1801條經驗 獲得超8個贊
基本上
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>`
基本上做同樣的事情
- 3 回答
- 0 關注
- 183 瀏覽
添加回答
舉報
0/150
提交
取消