如何在电子中动态添加段落

Question

我有一个段落数组

infoArray= [
    "<p data-i18next ='userGuideInfo.microbreak'></p>",
    "<p data-i18next ='userGuideInfo.break'></p>",
    "<p data-i18next ='userGuideInfo.notif'></p>",
    "<p data-i18next ='userGuideInfo.tray1'></p>",
    "<p data-i18next ='userGuideInfo.tray2'></p>",
    "<p data-i18next ='userGuideInfo.tray3'></p>",
    "<p data-i18next ='userGuideInfo.setting1'></p>",
    "<p data-i18next ='userGuideInfo.setting2'></p>",
    "<p data-i18next ='userGuideInfo.setting3'></p>"
]

我想在按钮单击时一一显示它们。我正在使用电子 JS。我的 HTML 排列和 JS 代码是

let infoDiv = document.querySelector('div[id=infoDisplay]')
let infoPara = document.querySelector('p[id=infoPara]')
infoPara.remove()
    
infoDiv.appendChild(infoArray[currIndex])

<div id=infoDisplay>
    <p id="infoPara" data-i18next="userGuideInfo.microbreak"></p>
</div>

有人可以建议我该怎么做吗？提前致谢

Answer 1

您需要遍历每个元素并附加 html 或创建包装器元素并附加数据。您可以采取以下几种方法，选择您最喜欢的：

方法一

我们可以利用insertAdjacentHTML，将beforeend作为第一个参数，将我们的html作为第二个参数，这个函数将允许我们将html放置在许多不同的地方，这就是为什么它首先出现在列表。

let infoArray= [
    "<p data-i18next='userGuideInfo.microbreak'>1</p>",
    "<p data-i18next='userGuideInfo.break'>2</p>",
    "<p data-i18next='userGuideInfo.notif'>3</p>",
    "<p data-i18next='userGuideInfo.tray1'>4</p>",
    "<p data-i18next='userGuideInfo.tray2'>5</p>",
    "<p data-i18next='userGuideInfo.tray3'>6</p>",
    "<p data-i18next='userGuideInfo.setting1'>7</p>",
    "<p data-i18next='userGuideInfo.setting2'>8</p>",
    "<p data-i18next='userGuideInfo.setting3'>9</p>"
]

let infoDiv = document.querySelector('div[id=infoDisplay]')
let infoPara = document.querySelector('p[id=infoPara]')
infoPara.remove()
    
infoArray.forEach(item => {
    infoDiv.insertAdjacentHTML('beforeend', item)
})

<div id=infoDisplay>
    <p id="infoPara" data-i18next="userGuideInfo.microbreak"></p>
</div>

方法二

创建一个包装元素并将其附加到 div。这使用了appendChild，就像您的示例一样。

let infoArray= [
    "<p data-i18next='userGuideInfo.microbreak'>1</p>",
    "<p data-i18next='userGuideInfo.break'>2</p>",
    "<p data-i18next='userGuideInfo.notif'>3</p>",
    "<p data-i18next='userGuideInfo.tray1'>4</p>",
    "<p data-i18next='userGuideInfo.tray2'>5</p>",
    "<p data-i18next='userGuideInfo.tray3'>6</p>",
    "<p data-i18next='userGuideInfo.setting1'>7</p>",
    "<p data-i18next='userGuideInfo.setting2'>8</p>",
    "<p data-i18next='userGuideInfo.setting3'>9</p>"
]

let infoDiv = document.querySelector('div[id=infoDisplay]')
let infoPara = document.querySelector('p[id=infoPara]')
infoPara.remove()
    
infoArray.forEach(item => {
    let div = document.createElement('div')
    div.innerHTML = item
    infoDiv.appendChild(div)
})

<div id=infoDisplay>
    <p id="infoPara" data-i18next="userGuideInfo.microbreak"></p>
</div>

方法3（我最不喜欢的方法）

使用innerHTML 将数据附加到div。这将删除您的示例使用的appendChild。

let infoArray= [
    "<p data-i18next='userGuideInfo.microbreak'>1</p>",
    "<p data-i18next='userGuideInfo.break'>2</p>",
    "<p data-i18next='userGuideInfo.notif'>3</p>",
    "<p data-i18next='userGuideInfo.tray1'>4</p>",
    "<p data-i18next='userGuideInfo.tray2'>5</p>",
    "<p data-i18next='userGuideInfo.tray3'>6</p>",
    "<p data-i18next='userGuideInfo.setting1'>7</p>",
    "<p data-i18next='userGuideInfo.setting2'>8</p>",
    "<p data-i18next='userGuideInfo.setting3'>9</p>"
]

let infoDiv = document.querySelector('div[id=infoDisplay]')
let infoPara = document.querySelector('p[id=infoPara]')
infoPara.remove()
    
infoArray.forEach(item => {
    infoDiv.innerHTML += item
})

<div id=infoDisplay>
    <p id="infoPara" data-i18next="userGuideInfo.microbreak"></p>
</div>