Recentemente estou criando muita coisa de HTML dinamicamente.
Exemplo
var table = document.createElement('table');
table.style = 'width:500px;border:1px solid #CCC;';
var tbody = document.createElement('tbody');
for(let i = 0; i < 10; i++){
let tr = document.createElement('tr');
// 1
let td = document.createElement('td');
td.style = 'width:100px;border:1px solid #CCC;';
let span = document.createElement('span');
span.innerHTML = 'teste '+(i+1);
td.appendChild(span);
tr.appendChild(td);
// 2
td = document.createElement('td');
td.style = 'border:1px solid #CCC;';
span = document.createElement('span');
span.innerHTML = 'texto '+(i+1);
td.appendChild(span);
tr.appendChild(td);
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);
Duvida
Vendo algumas perguntas sobre JS vi que na grande maioria o pessoal monta por String
var html = '<table style="width:500px; border:1px solid #ccc">';
html += '<tbody>';
for(let i = 0; i < 10; i++){
html += '<tr>';
html += '<td style="width:100px;border:1px solid #CCC;">';
html += '<span>teste '+(i+1)+'</span>';
html += '</td>';
html += '<td style="border:1px solid #CCC;">';
html += '<span>texto '+(i+1)+'</span>';
html += '</td>';
html += '</tr>';
}
html += '</tbody>';
html += '</table>';
document.body.innerHTML += html;
- Quais a diferenças entre estes métodos? (tirando o fato de um ser por Objeto e o outro String)
- Algum deles é melhor que o outro, ou são equivalentes? (tirando "Eu prefiro assim pois...")