使用 JavaScript 与常规 HTML 创建 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 不会创建此空白文本节点。

证明：

这是一个 sn-p，它显示实际上有 5 个由 HTML 创建的子节点，其中 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>