附加模板字符串答案

【问题标题】：Appending a template string附加模板字符串
【发布时间】：2019-02-10 16:37:58
【问题描述】：

是否可以将模板字符串附加到 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);

});

【问题讨论】：

标签： javascript reactjs

【解决方案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);

});

【讨论】：