使用JavaScript与常规HTML

Question

我有一个像这样的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上生成完全相同的结果？

Answer 1

为什么会发生这种情况：

您的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。

Answer 2

您可以使用textNode：

插入空格

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);
usernav.appendChild(document.createTextNode('\n'));

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

<div id="user-nav">

</div>