javascript - 如何将原始 html ('string' )附加到 html 网页

Question

我想添加一些 html 来附加到像这样的函数中的 div

const chatContainer = document.getElementById('chat');
    chatContainer.appendChild(`
        <div class="message-data align-center">
            <span class="message-data-name" >User joined</span>
        </div>
    `)

但是前面的例子不起作用。

Answer 1

.appendChild期望调用它的参数是 DOM node 。因此，您需要在附加字符串之前将其解析到 DOM 节点中。

const parser = new DOMParser();
const chatContainer = document.getElementById('chat');
chatContainer.appendChild(parser.parseFromString(`
    <div class="message-data align-center">
        <span class="message-data-name" >User joined</span>
    </div>
`, 'text/xml').firstChild)

<div id='chat'>