JS (шаблон Literal-), сгенерированный html, обновляет DOM?

При создании HTML с помощью JavaScript лучше использовать раздражающе многословный document.createElement("p")...

(как показано здесь: https://www.w3schools.com/jsref/met_document_createelement.asp )

или лучше использовать литералы шаблонов (обратные галочки)?

`<p></p>`

Я не уверен, что литералы шаблонов обновляют DOM или нет, и я предполагаю, что это делает createElement()?

И я не знаю, как это проверить.

Пример кода:

<body>
  <div id="myDIV"></div>

  <script>

    let theDiv = document.getElementById("myDIV");

    function verboseGeneration(){
      var para = document.createElement("P");
      para.innerHTML = "This is a paragraph.";
      theDiv.insertAdjacentElement("beforeend", para);
    }

    function TemplateLiteralGeneration(){
        theDiv.insertAdjacentHTML("beforeend", `<p>This is a paragraph.</p>`)
    }

    verboseGeneration();
    TemplateLiteralGeneration();

  </script>
</body>

Ожидаемый результат: они равны.

Фактический результат: Неизвестно, так как я не знаю, как проверить, как он взаимодействует с HTML DOM.

(Я планирую создать большую таблицу на основе некоторых массивов, и я не решаюсь использовать шаблонные литералы, если они не обновляются или не работают должным образом с DOM, и это создает странные проблемы в будущем.)


javascript html dom updates generated
person Sebastian Norr    schedule 25.07.2019    source источник
comment
Литералы шаблонов ничего не делают. Они просто оцениваются как строковое значение, ничего больше. То, что обновляет DOM, является вашим innerHTML назначением, и для этого абсолютно не имеет значения, как появилась строка.   -  person Bergi    schedule 25.07.2019

Ответы (1)


arrow_upward
1
arrow_downward

Это зависит от того, что вы хотите сделать с созданной разметкой. Если вы хотите выполнить манипуляцию, пройтись по фрагменту, вам лучше создать элемент как узел (используя document.createElement()), а не использовать обычную строку.

И, поскольку вы упомянули, что создаете большую таблицу, может иметь смысл (и, вероятно, более высокая производительность) фактически создать фрагмент документа, содержащий все содержимое вашей большой таблицы, а затем добавьте весь фрагмент в пустой элемент <table>.

Вот пример: я хочу итеративно создать таблицу с 10 столбцами в ширину и 20 строками в высоту. Если вы решите создать всю таблицу, используя простую строку, строка станет очень длинной, и вы не сможете просмотреть созданную таблицу, если захотите.

В приведенном ниже примере показано, насколько мощным может быть использование document.createElement() и фрагментов: я могу задним числом применить новый стиль и логику к разметке, проходя по ней. Вы не можете сделать это с простыми строками. В этом случае я решил вернуться к таблице в конце и условно выделить ячейки, в которых есть четные числа:

const fragment = document.createDocumentFragment();
const columns = 10;
const rows = 20;

// Create table header
const header = document.createElement('thead');
const headerRow = document.createElement('tr');
for (let i = 0; i < columns; i++) {
  const headerCell = document.createElement('th');
  headerCell.innerHTML = `Col ${i + 1}`;
  headerRow.appendChild(headerCell);
}
header.appendChild(headerRow);

// Append header to table
fragment.appendChild(header);

// Create table body
const body = document.createElement('tbody');

for (let i = 0; i < rows; i++) {
  const bodyRow = document.createElement('tr');
  for (let j = 0; j < columns; j++) {
    const bodyCell = document.createElement('td');
    bodyCell.innerHTML = i + j + 1;
    bodyRow.appendChild(bodyCell);
  }
  
  body.appendChild(bodyRow);
}

// Append body to table
fragment.appendChild(body);

// Here's the advantage of storing your markup as node/elements
// You can traverse through the fragment if you want!
// Let's say I want to highlight all even numbers
const allCells = fragment.querySelectorAll('tbody td');
Array.from(allCells).forEach(cell => {
  const n = +cell.innerHTML;
  if (n % 2 === 0) {
    cell.classList.add('highlight');
  }
});

document.getElementById('my-table').appendChild(fragment);
table th,
table td {
  border: 1px solid #ccc;
}

.highlight {
  background-color: yellow;
}
<table id="my-table"></table>

person Terry    schedule 25.07.2019
comment
Спасибо! Я узнал о createDocumentFragment() из этого, это будет очень полезно. В качестве благодарности, знаете ли вы о insertAdjacentHTML() ? используйте это вместо innerHTML, это не вызывает дорогостоящего reFlow DOM, как это делает innerHTML. - person Sebastian Norr; 26.07.2019