Как динамически добавить абзац в электронном виде

У меня есть массив абзацев

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>

Может кто-нибудь подсказать, как мне это сделать? заранее спасибо

javascript html arrays dynamic electron

02.04.2018 17:23

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

860

Ответы 1

Вам нужно пройти через каждый элемент и либо добавить html, либо создать элемент-оболочку и добавить данные. Вот несколько подходов, которые вы можете выбрать, выберите свой любимый:

Способ 1

Мы можем воспользоваться преимуществом 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>

Способ 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 (мой нелюбимый способ)

Добавьте данные в div с помощью innerHTML. Это исключает использование 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>

Спасибо, но, похоже, ни один из них не работает. Я продолжаю получать не могу удалить нуль. Также я хочу отображать только один параграф за раз. Зачем мне использовать петлю?

— 03.04.2018 05:13

02.04.2018 17:34