Какой способ лучше использовать с DOM?
Какой из способов ниже более эффективен или в чем разница между этими двумя способами, которые делают одно и тоже? Какой из способов более предпочтителен и как делать не стоит?
- В body отправляется html-код и в нем отыскиваются объекты:
const html = document.body;
html.innerHTML = `
<div class="sample">
<div class="one"></div>
</div>`;
const one = html.querySelector('.one');
one.textContent = 'hello';
- Создавать объекты в js-коде и присоединять их:
const sample = document.createElement('div');
sample.classList.add('sample');
const one = document.createElement('div');
one.classList.add('one');
one.textContent = 'hello';
sample.appendChild(one);
document.body.appendChild(sample);