如何用JavaScript在父div添加子div后正确设置内容及嵌套结构？

目标要生成的HTML结构：

<div class="container">
     <div class="mesg left">
            <div class="username">
                You
            </div>
      The main content goes here
            <span id="time">08:23am</span>
     </div>
</div>

你目前遇到的问题是生成的结构中文本内容跑到了用户名div前面，核心原因是DOM元素的添加顺序错误。要实现正确的结构，必须严格按照目标结构的顺序依次创建并插入元素：

实现代码（原生JavaScript） #

// 1. 创建最外层容器
const container = document.createElement('div');
container.classList.add('container');

// 2. 创建消息容器
const mesgDiv = document.createElement('div');
mesgDiv.classList.add('mesg', 'left');

// 3. 创建用户名div并添加到消息容器
const usernameDiv = document.createElement('div');
usernameDiv.classList.add('username');
usernameDiv.textContent = 'You';
mesgDiv.appendChild(usernameDiv);

// 4. 添加文本内容到消息容器（注意顺序：在用户名之后，时间之前）
const contentText = document.createTextNode('The main content goes here');
mesgDiv.appendChild(contentText);

// 5. 创建时间span并添加到消息容器
const timeSpan = document.createElement('span');
timeSpan.id = 'time';
timeSpan.textContent = '08:23am';
mesgDiv.appendChild(timeSpan);

// 6. 将消息容器添加到最外层容器
container.appendChild(mesgDiv);

// 最后把container添加到页面目标位置，比如body
document.body.appendChild(container);

简化方案（innerHTML） #

如果觉得分步创建麻烦，也可以直接用innerHTML一次性生成结构，这种方式更直观，适合结构不复杂的场景：

const container = document.createElement('div');
container.classList.add('container');
container.innerHTML = `
    <div class="mesg left">
        <div class="username">You</div>
        The main content goes here
        <span id="time">08:23am</span>
    </div>
`;
document.body.appendChild(container);

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