由于换行和 JavaScript createElement 导致元素之间的空格答案

【问题标题】：Spaces between elements because of new line and JavaScript createElement由于换行和 JavaScript createElement 导致元素之间的空格
【发布时间】：2020-09-01 18:01:51
【问题描述】：

我有一个这样的 HTML 页面 <div id="div"></div>

我想使用 JavaScript 添加两个元素（a 和 button 出现问题）

a1 = document.createElement("a")
a1.innerText = "element1"
div.appendChild(a1)
a2 = document.createElement("a")
a2.innerText = "element2"
div.appendChild(a2)

结果是<div id="div"><a>element1</a><a>element2</a></div>。它不同于

<div id="div">
    <a>element1</a>
    <a>element2</a>
</div>

第二个变体在单词之间有一些空格。

为什么会这样？我应该怎么做才能获得一些固定数量的空间（我需要它，因为最初使用按钮）？在这种情况下应该采取什么措施？

【问题讨论】：

你能做一个现场演示吗？我不明白你在说什么空间
@NSTuttle HTML/CSS 处理空白的方式并不相同。换行符呈现不同。
stackoverflow.com/questions/5078239/…

标签： javascript html button createelement

【解决方案1】：

间隔版本在元素之间具有文本节点。其他版本没有。

通常，应该确保自己的代码设计为完全不相关的文本节点 - 无论它们是否存在，代码都可以正常工作。这很容易做到。需要记住的最重要的一点是，parentNode.childNodes 返回一个包含所有个子节点的集合，包括文本节点，而 parentNode.children 返回一个仅包含 element 个子节点的集合。

如果您想在第二个代码中添加文本节点，可以将文本字符串传递给insertAdjacentText：

const div = document.querySelector('div');
// First text node
div.insertAdjacentText('beforeend', `
    `);
a1 = document.createElement("a")
a1.innerText = "element1"
div.appendChild(a1)

// Second text node
div.insertAdjacentText('beforeend', `
    `);

a2 = document.createElement("a")
a2.innerText = "element2"
div.appendChild(a2)

// Third text node
div.insertAdjacentText('beforeend', `

`);

console.log('"' + div.innerHTML + '"');

&lt;div&gt;&lt;/div&gt;

但这真的很奇怪。如果你真的想这样做，你可以这样做，但它并没有完成任何有用的事情。

【讨论】：