問題：在這段代碼中，我正在托盤中顯示 DOM 中的本地存盤，如何在第一個中的“ul”中顯示第二個的“li”？
像這樣展示它？：
<div id = "receta${[i]}">
<h2>${recetasLocales[i].nombreReceta}</h2>
<ul><li>${recetasLocales[i].ingredientes[n].nombre}</li></ul>
<p>${recetasLocales[i].procedimiento}</p>
</div>
這是我撰寫的代碼，如果您在這種情況下看到兩個 innerHTML 顯然是分開的，我不希望這樣。
mostrar.addEventListener('click', () => {
let recetasLocales = JSON.parse(localStorage.getItem('recetasLocales'))
for (let i = 0; i < recetasLocales.length; i ) {
listaReceta.innerHTML =`
<div id = "receta${[i]}">
<h2>${recetasLocales[i].nombreReceta}</h2>
<ul></ul>
<p>${recetasLocales[i].procedimiento}</p>
</div>
`
for (let n = 0; n < recetasLocales[i].ingredientes.length; n ) {
listaReceta.innerHTML = `
<li>${recetasLocales[i].ingredientes[n].nombre}</li>
`
}
}
uj5u.com熱心網友回復：
有多種方法可以執行此操作。
一種方法是擁有一個字串變數并根據自己的喜好對其進行操作。
例子：
mostrar.addEventListener('click', () => {
let recetasLocales = JSON.parse(localStorage.getItem('recetasLocales'))
for (let i = 0; i < recetasLocales.length; i ) {
let str =`
<div id = "receta${[i]}">
<h2>${recetasLocales[i].nombreReceta}</h2>
<ul>
`
for (let n = 0; n < recetasLocales[i].ingredientes.length; n ) {
str = `
<li>${recetasLocales[i].ingredientes[n].nombre}</li>
`
}
str =`</ul>
<p>${recetasLocales[i].procedimiento}</p>
</div>`
listaReceta.innerHTML=str
}
uj5u.com熱心網友回復：
另一種在不一直連接字串的情況下做這種事情的方法是使用document.createElement()and appendChild()。
請注意，這種用法
textContent可以防止XSS 攻擊，因為它沒有被決議為 HTML。
請參閱此最小示例。
const someValues = [
[1, 2],
[1, 2],
[1, 2],
[1, 2],
];
// create div which contains the lists
const div = document.createElement("div");
for (let i = 0; i < someValues.length; i ) {
// create heading
const heading = document.createElement("h2");
heading.textContent = `My heading for element ${i}`;
// create list
const list = document.createElement("ul");
for (let j = 0; j < someValues[i].length; j ) {
const element = someValues[i][j];
// create a new list item
const listItem = document.createElement("li");
listItem.textContent = element;
// add list item to list
list.appendChild(listItem);
}
// adding it all together
div.appendChild(heading);
div.appendChild(list);
}
document.addEventListener("DOMContentLoaded", function (event) {
const content = document.getElementById("test");
content.appendChild(div);
});<div id="test"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/445687.html
標籤：javascript dom 内部html