Сравните два массива с forEach и добавьте различные HTML-элементы при условии

Question

Я хочу сравнить два массива с forEach.Когда два массива имеют соответствующий элемент, он вставляет элемент html, а если нет соответствующих элементов, он вставляет другой элемент html.

var array1 = [0, 1, 2, 3, 4];
    var array2 = [2, 4];
    
    array1.forEach(function(number1){
      array2.forEach(function(number2){
        if(number1 === number2){
          document.getElementById('numbers').innerHTML += '<span>' + number1 + '</span>'
        } else {
          document.getElementById('numbers').innerHTML += '<span class="inactive">' + number1 + '</span>'
        }
      });
    });

span {
  font-weight: bold;
  margin-left: 10px;
}

.inactive {
  font-weight: normal;
}

<div id='numbers'></div>

Answer 1

let arrayToHtml = array1.filter(el=>{
    el.includes(array2);
})
arrayToHtml.forEach(val=>{
    addHtml(tag,text);
})

function addHtml(tag, text){
    let newEl = document.body.creatElement(tag);
    newEl.textContent(text);
    document.body.appendChild(newEl)
}

Answer 2

У вас есть два вложенных цикла, поэтому вы получаете 0 0 1 1 2 2 3 3 4 4.

Шаг за шагом:

1. число1 = 0
2. число2 = 2
3. если условие неверно
4. вывод равен 0 с неактивным классом
5. число1 = 0
6. число2 = 4
7. если условие неверно
8. вывод равен 0 с неактивным классом
9. number1 = 1
10. number2 = 2
11. если условие неверное
12. вывод равен 1 с неактивным классом
13. и т. Д.

вам определенно следует определить числовую переменную, чтобы получить этот элемент только один раз:

const numbers = document.getElementById('numbers');

использование включает и литералов шаблона сделает ваш код более элегантным:

array1.forEach(function(number1){
   if (array2.includes(number1)) {
       numbers.innerHTML += `<span> ${number1} </span>`;
   } else {
       numbers.innerHTML += `<span class="inactive"> ${number1} </span>`;
   }
});

Answer 3

Вместо 2-го Array.forEach() вызова вы можете использовать Array.includes(), чтобы проверить, найден ли элемент из 1-го массива во 2-м массиве:

const array1 = [0, 1, 2, 3, 4];
const array2 = [2, 4];

array1.forEach(function(number1){
  console.log(array2.includes(number1) ? 'yes' : 'no');
});

Или в вашем случае:

const array1 = [0, 1, 2, 3, 4];
const array2 = [2, 4];

const numbers = document.getElementById('numbers');

array1.forEach(function(number1){
  const inactive = !array2.includes(number1) ? 'class="inactive"' : '';
  numbers.innerHTML += `<span ${inactive}> ${number1} </span>`;
});

span:not(.inactive) {
  font-weight: bold;
}

<div id="numbers"></div>