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

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代码是

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

方法1

我们可以通过使用beforeend作为第一个参数来利用insertAdjacentHTML，并将我们的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>

方法2

创建一个包装元素并将其附加到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>