javascript - 使用JavaScript和常规HTML创建HTML元素

我有这样的HTML代码：

<div id="user-nav">
    <button class="btn btn-primary btn-sm">Subscribe Now</button>
    <button class="btn btn-primary btn-sm">Log In</button>
</div>

然后，我尝试使用JavaScript创建相同的内容：

// usernav - subscribe, login, settings
var subbtn = document.createElement("button");
subbtn.className = "btn btn-primary btn-sm";
subbtn.textContent = "Subscribe Now";
usernav.appendChild(subbtn);

var loginbtn = document.createElement("button");
loginbtn.className = "btn btn-primary btn-sm";
loginbtn.textContent = "Log In";
usernav.appendChild(loginbtn);

我的JavaScript代码运行正常。

但是，有一个细微的差别，即JavaScript产生的按钮彼此接触，而当我只是用HTML编写代码时，这两个按钮之间存在很小的间隙。

当我检查两个页面的元素时，代码是相同的。

为什么会发生这种情况，如何在JavaScript上产生完全相同的结果？

最佳答案

为什么会这样：

您的HTML在两个元素之间包含空格字符，使用默认样式会将其折叠为一个空格。

但是，您的JavaScript不会创建此空白文本节点。

证明：

这是一个片段，显示了HTML实际上创建了5个子节点，其中3个在空白处的文本节点上。

var el = document.getElementById('user-nav');

console.log(el.childNodes);

document.getElementById('output').textContent = 'Number of Child nodes: ' + el.childNodes.length;

<div id="user-nav">
    <button class="btn btn-primary btn-sm">Subscribe Now</button>
    <button class="btn btn-primary btn-sm">Log In</button>
</div>

<pre id="output"></pre>

如果您检查控制台，将会看到类似以下的输出：

NodeList [ #text "
    ", <button.btn.btn-primary.btn-sm>, #text "
    ", <button.btn.btn-primary.btn-sm>, #text "
" ]

重新创建结果：

您可以使用document.createTextNode在JavaScript中创建文本节点，如下所示：

var usernav = document.getElementById('user-nav');

var subbtn = document.createElement("button");
subbtn.className = "btn btn-primary btn-sm";
subbtn.textContent = "Subscribe Now";
usernav.appendChild(subbtn);

// Insert text node between the buttons:
usernav.appendChild(document.createTextNode(' '));

var loginbtn = document.createElement("button");
loginbtn.className = "btn btn-primary btn-sm";
loginbtn.textContent = "Log In";
usernav.appendChild(loginbtn);

<div id="user-nav"></div>

但是，您可能要考虑使用CSS代替。