Как напечатать каждый элемент массива в отдельной строке? - PullRequest
Новая
       3

Как напечатать каждый элемент массива в отдельной строке?

1 голос
/ 05 марта 2020

Я новичок в JavaScript и пытаюсь создать клиентский справочный экстрактор для научных c PDF-файлов. Я хочу каждую ссылку на отдельной строке. Я пробовал '\n' и '<br>', они не работают. Вот пример: 

references = ["1", "2", "3"];
document.getElementById("output").textContent = references.join('<br>');
<div id="output">
  <div>Extracting...</div>
</div>

Мой вывод

1
2
3

Ответы [ 3 ]

3 голосов
/ 05 марта 2020

Вы должны использовать innerHTML вместо textContent с <br />.
При textContent "значение не анализируется как HTML" ; см Отличия от внутреннего HTML. 

references = ["1", "2", "3"];
document.getElementById("output").innerHTML = references.join('<br>');
<div id="output">
  <div>Extracting...</div>
</div>

Вы также можете использовать innerText, но тогда вам придется использовать \n разделитель строк вместо <br />

references = ["1", "2", "3"];
document.getElementById("output").innerText = references.join('\n');
<div id="output">
  <div>Extracting...</div>
</div>
1 голос
/ 05 марта 2020

Если вы хотите, чтобы каждый элемент в «ссылках» был его собственным элементом HTML, вы можете попробовать зациклить массив, создать новый элемент и присоединить его к DOM. 

for( const ref of references){
        let newEl = document.createElement('div');
        newEl.innerHTML = ref;
        document.body.appendChild(newEl);
  }
1 голос
/ 05 марта 2020

Вы можете использовать map для итерации каждого элемента в массиве следующим образом: 

references = ["1", "2", "3"];
references.map((reference) => {
  const node = document.createElement('p');
  const textnode = document.createTextNode(reference);
  node.append(textnode);
  document.getElementById("output").appendChild(node);
})
<div id="output">
  <div>Extracting...</div>
</div>
...