使用JavaScript与常规HTML创建HTML元素

Creating HTML elements with JavaScript vs regular HTML

本文关键字：HTML 创建 元素 常规 JavaScript 使用      更新时间：2023-09-26

我有一个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。

您可以使用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>

相关文章：