主页 / 问题 / 892553
Accepted
Чайник
Asked:2020-10-13 17:38:44 +0000 UTC2020-10-13 17:38:44 +0000 UTC

在java脚本中创建元素

  • 772

告诉我如何在 JS 中更高效地创建大容量元素，例如，带有输入的弹出窗口 - 通过 document.createElement 或使用 innerHtml = '............' 来完成？

javascript

2 个回答

  1. Best Answer

    等等关于元素的创建：

    1）使用html创建元素 ，隐藏它们，然后在必要时显示它们。

    优点- 无论表单的复杂性如何，都易于实施。

    缺点- 重新应用时 - 代码重复。

    2) 使用createElement创建元素，根据需要将它们插入元素中

    优点- 可以方便地动态添加到任何所需的位置。可重用性

    缺点- 复杂元素的创建很麻烦。

    3) 使用innerHTML放置是非常可行的（您可以使用模板字符串' <input type='text' value='${valiable}'/>' ）。但性能受到影响。作为替代方案 - element.insertAdjacentHTML(position, textHTML)- 一种性能更高的方法（无需额外的序列化。）

    优点——使用方便，可重复使用

    缺点- 插入纯文本时，出于安全原因不建议使用它

    4) React / Vue - 在更高级别使用模板（从上述所有方法中抽象出来，尽管它们在后台使用），为创建模板、重用代码提供了许多机会

    优势- 以上 + 大量现成的解决方案，在更高级别进行测试的可能性，在大多数现代项目中积极使用

    缺点- 用他们拉很多多余的。我认为它们不太适合非常简单的页面/站点。初学者在理解正在发生的事情时会引起很多问题。需要了解和理解 js + 函数式编程的基础知识

    所有这些都写得很笼统，但我认为我传达了总体思路。

    • 3

  2. 您可以使用 HTML5元素<template>及其 API。

    // Получаем шаблон. Переменная t будет содержать
// найденный элемент <template> и являться объектом
// класса HTMLElement.
var t = document.querySelector('#productrow');


// Получаем тело таблицы (место, куда будем вставлять новые строки)
var tb = document.querySelector("tbody");

// Из свойства content объекта t получаем представление того, что
// будем вставлять в таблицу в виде DocumentFragment
var clone = document.importNode(t.content, true);

// Теперь получаем все ячейки вставляемой строки и наполняем их контентом
var td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";

// В тело таблицы вставляем "клона", то есть уже наполненный шаблон
tb.appendChild(clone);

// Операцию можно повторять сколько угодно раз
var clone2 = document.importNode(t.content, true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";

tb.appendChild(clone2);
    <table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

    上面的例子改编自 MDN（上面的链接）。类似地，您可以为弹出窗口创建模板（模板），并仅为某些事件打开（显示）此窗口。例如，当您单击一个按钮时。

    显然，这种方法的优点是您可以直接在 HTML 中处理视图，而不必将其拉入逻辑（并且分离很好），但是 JS 负责用动态内容填充模板（当然，静态数据将是合理的）。直接在模板中并规定）。另外，很明显，代码重用。为弹出窗口创建一次模板，然后根据需要将其插入到页面上，并在需要时多次插入。

    • 2

相关问题