HTML 标记到 javascript createElement

Question

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

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

这是我目前所写的：

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

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

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

Answer 1

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

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');
bold.textContent = "hello";
// var boldTxt = document.createTextNode("Hello");
// bold.appendChild(boldTxt);


var txt = document.createTextNode(" World");

div2.appendChild(div3);
div3.appendChild(par);
par.appendChild(bold);
par.appendChild(txt);

document.body.append(div2);

Answer 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 = document.createElement('p');
var bold = document.createElement('b');
bold.textContent = `${data.username}: `;
par.appendChild(bold);
var text = document.createTextNode(data.msg);
par.appendChild(text);

div3.appendChild(par);
div2.appendChild(div3);
root.appendChild(div2);

<div id="root"></div>