Печать набора элементов в javascript

Question

Я пытаюсь напечатать заданный элемент через innerHTML, но не получаю желаемого результата.Хотя я пытался с document.write(), это печать, но я хочу использовать только innerHTML.

Вот мой исходный код:

  <div id="demo"> </div>  
  <script type="text/javascript">
     var i, item;
     var setObj1 = new Set();
     for(i=0;i<5;i++)
     setObj1.add(i);

     for (item of setObj1.values())
     //document.write(item+",");
     document.getElementById('demo').innerHTML="The set value is: "+ item;         
  </script>

Вывод: 4

Желаемый вывод: 0 1 2 3 4

Подскажите, пожалуйста, как использовать innerHTML для печати вывода. Я пробовал консольный журнал и document.write (), они работают.

Answer 1

У вас есть несколько проблем:

1. Вам нужно добавить (добавить) в конец вашего innerHTML, в тот момент, когда вы перезаписываете содержимое на каждой итерации вашегопетля.Вместо этого вы должны использовать += для добавления к содержимому в div.

2. Вы запрашиваете DOM (объектную модель документа) ненужное количество раз.Вам действительно нужно сделать запрос только один раз.Использование document.getElementById - это дорогостоящая операция, поэтому ее рекомендуется выполнять минимальное количество раз.

3. Используйте .textContent вместо .innerHTML.Если вы не добавляете или не добавляете HTML, вам не нужно использовать .innerHTML, .textContent поможет.Хорошая привычка - использовать .textContent, когда имеешь дело только с текстом.Это может помочь вам избежать таких проблем, как уязвимости XSS (в будущих программах, если у вас есть пользовательский ввод)

См. Рабочий пример ниже (см. Комментарии к коду для дальнейшего объяснения):

var i, item;
var setObj1 = new Set();
for (i = 0; i < 5; i++)
  setObj1.add(i);

var outputElement = document.getElementById('demo'); // get the element you wish to add to
var toAppend = "The set value is: "; // create a string of the content you wish to add
for (item of setObj1.values())
  toAppend += item + ' '; // build up the content you wish to add by adding to the string
  
outputElement.textContent += toAppend; // only once the loop is done add your content to the page (the DOM)

<div id="demo"></div>

Answer 2

Вы можете сохранить все значения в переменной, а затем установить это значение для элемента.Обратите внимание, что вы можете использовать textContent или innerText, когда htmlString является только текстом.

<div id="demo"> </div>  
<script type="text/javascript">
   var i, item;
   var setObj1 = new Set();
   for(i=0;i<5;i++)
   setObj1.add(i);
   var val = ''
   for (item of setObj1.values())
    val+=item + ' '; 

   document.getElementById('demo').textContent = "The set values are: "+val;
</script>

Answer 3

С вашим кодом вы увидите только последний элемент.

Причина в том, что для каждого элемента в вашем Set вы меняете содержимое вашего div, вставляя новую строку.Таким образом, в конце будет показан только последний.

Если вы хотите сохранить все из них, вы можете объединить содержимое вашего div на каждой итерации:

var i, item;
var setObj1 = new Set();
for (i = 0; i < 5; i++)
  setObj1.add(i);

for (item of setObj1.values())
  //document.write(item+",");
  document.getElementById('demo').innerHTML += "The set value is: " + item + "<br/>";

<div id="demo"></div>

Вы также можете использовать appendChild, если хотите добавлять новые HTML-элементы в ваш div, а не просто изменять HTML-содержимое вашего div