Выберите по атрибуту, соответственно установите innerHTML

Question

Как выбрать по атрибуту и ​​установить результат innerHTML соответственно в чистом JavaScript?

const texts = [
    {id: 'id01', text='Content 01'},
    {id: 'id02', text='Content 02'}
]

<div data-my-id="id01"></div>
<div data-my-id="id02"></div>

Конечный результат должен быть:

<div data-my-id="id01">Content 01</div>
<div data-my-id="id02">Content 02</div>

РЕДАКТИРОВАТЬ: Забыл упомянуть: неэффективно циклически перебирать массив, поскольку их сотни (может быть, тысячи)) предметов.Есть ли способ перебрать результаты querySelector и установить соответствующий текст?

Answer 1

Вам нужно перебрать каждый текст.Найдите элемент с этим атрибутом и измените его внутренний HTML.

РЕДАКТИРОВАТЬ: Я добавил функцию loadHtmlAsyc, чтобы не замедлять скорость загрузки страницы.Побочным эффектом этого будет то, что контент может потенциально загружаться «случайно», то есть он не будет загружать одну строку после следующей.Но вы можете загрузить тысячи элементов, не дожидаясь рендеринга каждой строки.

const texts = [
  {id: 'id01', text: 'Content 01'},
  {id: 'id02', text: 'Content 02'}
];

for (i = 0; i < texts.length; i++) {
  let id = texts[i].id;
  let text = texts[i].text;
  let target = document.querySelector(`[data-my-id="${id}"]`);

  loadHtmlAsyc(target, text);
}

function loadHtmlAsyc(ele, html) {
  setTimeout(function() {
    ele.innerHTML += html;
  }, 0);
}

Answer 2

Как вы сказали, у вас может быть несколько записей в массиве.Я предлагаю вам инвертировать запрос для этого конкретного случая, например:

const texts = [
    {"id": "id01", "text":"Content 013"},
    {"id": "id02", "text":"Content 024"}
]

document.querySelectorAll('[data-my-id]').forEach(function(e) {
  e.innerHTML = texts.find(function(g){
    return g.id == e.getAttribute('data-my-id')}).text
})

<div data-my-id="id01">Content 01</div>
<div data-my-id="id02">Content 02</div>

Answer 3

Вы можете использовать функцию forEach для циклического перемещения по массиву и функцию querySelector([data-my-id="specific id"]) для выбора элемента и установки желаемого текста.

Вместо этого используйте атрибут textContent, потому что вынужно установить только текст

const texts = [
    {id: 'id01', text:'Content 01'},
    {id: 'id02', text:'Content 02'}
]

texts.forEach(({id, text}) => document.querySelector(`[data-my-id="${id}"]`).textContent=text);

<div data-my-id="id01"></div>
<div data-my-id="id02"></div>