Javascript 追加模板字符串

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

});

使用

接口的

insertAdjacentHTML（）

方法将指定的文本解析为HTML或XML，并将生成的节点插入到DOM树的指定位置。它不会重新分析正在使用它的元素，因此不会损坏该元素中的现有元素。这避免了额外的序列化步骤，使其比直接操作快得多

参数

位置

A表示相对于

元素的位置

必须是以下字符串之一：
-

'beforebeagin'

：在

元素本身之前。

-
'afterbegin'
：就在
元素的内部，在它的第一个子元素之前。

-
'beforeed'
：就在
元素的内部，在其最后一个子元素之后。

-
“afterend”
：在
元素本身之后

text


要解析为HTML或XML并插入到树中的字符串

socket.on（'coinFlip'，（结果）=>{
const messages=document.querySelector（“#messages”）；
const output=`
${result.result}
`；
messages.insertAdjacentHTML（“beforeend”，输出）；
});

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);

});

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

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

    messages.insertAdjacentHTML("beforeend", output);

});