JS (template Literal-) 生成 html，更新 DOM?

Question

当用 JavaScript 生成 HTML 时，使用烦人的冗长是不是更好 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.

的交互方式

（我计划基于一些数组生成一个大的 table，我犹豫是否使用模板文字，以防它们不更新或不能与 DOM，它会在未来产生奇怪的问题。）

Answer 1

这取决于您要对生成的标记执行的操作。如果你想执行操作，遍历片段，那么你最好创建一个元素作为节点（使用 document.createElement()），而不是使用纯字符串。

正如您提到的，您正在生成一个大的 table，实际创建一个 document fragment 来保存您的大 table，然后将整个片段附加到空白 <table> 元素中。

这是一个示例：我想迭代创建一个 table，它有 10 列宽和 20 行高。如果你选择用普通字符串构造整个table，字符串会变得很长，而且你不能想遍历创建的table。

下面的示例显示了使用 document.createElement() 和片段的强大功能：我可以通过遍历标记来追溯地将新样式和逻辑应用于标记。你不能用纯字符串来做到这一点。在这种情况下，我选择重新访问最后的 table，并有条件地突出显示其中包含偶数的单元格：

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>

JS (template Literal-) 生成 html，更新 DOM?

JS (template Literal-) generated html, updates the DOM?

javascript

html

dom

updates

generated