javascript createElement的HTML标记

我在用Javascript DOM编写HTML代码时遇到了很多问题。这个网站是我最后的希望。 我要转换此HTML标记：

<div class="received_msg">
   <div class="received_withd_msg">
      <p>
         <b>Username: </b> Hello everyone!
      </p>
   </div>
</div>

上面的javascript代码没有打印出我想要的HTML代码。正确的方法是什么

---

请注意，data.username和data.msg是完整代码中引用的变量。

您应该将创建的元素附加到它们的父元素中

var div2=document.createElement（'div'）；
div2.className='received_msg'；
var div3=document.createElement（'div'）；
div3.className='received_withd_msg'；
var PAR =文档.CuraEngEnter（“p”）；
var bold=document.createElement（'b'）；
bold.textContent=“你好”；
//var boldTxt=document.createTextNode（“Hello”）；
//bold.appendChild（boldTxt）；
var txt=document.createTextNode（“世界”）；
第2分部。附属儿童（第3分部）；
第3部分：儿童（par）；
Par。AppDeDar（粗体）；
附庸儿童（TXT）；
文件.正文.附件（第2部分）使用vanilla JS编写HTML可能确实令人困惑：）如上所述，在许多方面，将子元素附加到父元素会更容易、更好。仅以您的案例和所有变量来完成整个想法：


var data={username:'John Doe'，msg:'Hello World！'；
var root=document.querySelector（“#root”）；
var div2=document.createElement（'div'）；
div2.className='received_msg'；
var div3=document.createElement（'div'）；
div3.className='received_withd_msg'；
var PAR =文档.CuraEngEnter（“p”）；
var bold=document.createElement（'b'）；
bold.textContent=`${data.username}:`；
Par。AppDeDar（粗体）；
var text=document.createTextNode（data.msg）；
附录儿童（文本）；
第3部分：儿童（par）；
第2分部。附属儿童（第3分部）；
根。追加子对象（div2）
你应该追加，而不是设置innerHTMLY你是个天才！！非常感谢，谢谢！不幸的是，我不能支持你的答案，因为我是新来的。是的，javascript让我很困惑，直到现在我还没有写过javascript代码。我想我还有很多事情要学！！再次感谢你的贡献：我很乐意帮助你，祝你学习顺利，只是刚开始很难（否：D）
var div2 = document.createElement('div');
div2.className = 'received_msg';

var div3 = document.createElement('div');
div3.className = 'received_withd_msg';

var par = document.createElement('p');

var bold = document.createElement('b')

div2.innerHTML += div3.outerHTML;
par.innerHTML += bold.innerHTML + data.username + ' : ' + data.msg;

document.querySelector('#message').append(div2);
document.querySelector('#message').append(par);