Question

是否可以将模板字符串附加到div？我正在尝试优化代码，目前我的代码必须创建元素，添加类，添加文本节点，然后将所有内容附加在一起。我想知道是否可以只创建一个模板字符串然后附加它，以提高效率？我不想用innerHTML清除当前div的html。

socket.on('coinFlip', (result) => {

    const messages = document.querySelector('#messages');
    const output = `<li class="message broadcast">${result.result}</li>`;

    messages.appendChild(output);

});

当前有效的代码是：

socket.on('coinFlip', (result) => {

    // Grab dialog box
    const messages = document.querySelector('#messages');

    // Render messages
    const li = document.createElement('li');
    li.className = "message broadcast";
    const text = document.createTextNode(`${result.result}`);
    li.appendChild(text);
    messages.appendChild(li);

});

Answer 1

使用Element.insertAdjacentHTML(position, text)

Element接口的insertAdjacentHTML()方法将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析正在使用该元素的元素，因此不会破坏该元素内部的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操纵要快得多。

参数
  position
  DOMString代表相对于element的位置；
  必须为以下字符串之一：
  -'beforebegin'：在element之前。
  -'afterbegin'：在element内部，在它的第一个孩子之前。
  -'beforeend'：在element的最后一个孩子之后。
  -'afterend'：在element之后。

text
  要解析为HTML或XML并将其插入树中的字符串。

socket.on('coinFlip', (result) => {

    const messages = document.querySelector('#messages');
    const output = `<li class="message broadcast">${result.result}</li>`;

    messages.insertAdjacentHTML("beforeend", output);

});

附加模板字符串

1 个答案: