如何直接将HTML字符串内容追加到容器中且不生成额外包裹层？

你目前代码出现额外div包裹的原因是：你创建了一个临时div元素item装载生成的HTML字符串，之后将整个item元素追加到了messages容器中，导致多出一层外层包裹。

解决方案1：直接插入HTML字符串（最简便） #

使用insertAdjacentHTML方法可以直接把HTML字符串插入到容器指定位置，不需要创建额外临时元素：

var post = `<div id="${userid}">${content}</div>`;
// beforeend参数代表插入到容器内部的末尾位置
messages.insertAdjacentHTML('beforeend', post);

解决方案2：提取临时容器内的目标元素再追加 #

如果你需要先对生成的DOM元素做预处理再追加，可以只取出临时容器里的目标子元素：

var post = `<div id="${userid}">${content}</div>`;
var item = document.createElement('div');
item.innerHTML = post;
// 仅追加临时容器内的第一个子元素，即你需要的用户内容div
messages.appendChild(item.firstElementChild);

注意：如果content是用户可输入的内容，直接拼接HTML会存在XSS注入风险，生产环境使用建议先对内容做HTML转义处理，或采用安全的DOM属性赋值方式处理文本内容。

内容的提问来源于stack exchange，提问作者Cain Nuke