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

Question

[Влад]

document.body.innerHTML = document.body.innerHTML.replace('<td>1</td>', '<td><div class="num1 link">1</div></td>');

Подскажите, пожалуйста, как код выше написать более грамотно.
По сути мне не надо сканировать всю страницу, а только первые 4 строки всех имеющихся на странице таблиц.

Answer 1

[lemme]

Как вариант

const values = ['1', '2', '3', '4', '5', '6'];

Array.from(document.querySelectorAll('td'))
  .filter(el => values.some(i => i === el.innerHTML))
  .forEach(el => {
  	el.innerHTML = `<div class="num1 link">${el.innerHTML}</div>'`;
  })

Comments

[Влад]

а вы, наверное, и сможете легко дописать данный код, чтоб он срабатывал также при цифрах 2 и 3? :) буду оч благодарен!

[lemme]

Влад: обновил

Answer 2

[Stalker_RED]

Замена innerHTML не всегда подходит. Даже наоборот.
Делая так, вы сбросите все имеющиеся обработчики событий, например.

Обычно лучше найти все таблицы document.querySelectorAll('table')
Найти нужные строки в них, и потом заменить.

Все в сборе: https://jsfiddle.net/1nymagk2/
Если нужно заменять только те ячейки, в которых еденица, то нужно добавить еще одну проверку https://jsfiddle.net/1nymagk2/2/

Но вообще, может и не стоит делать замену, а просто добавлять к ячейке класс?