由于换行和JavaScript createElement而在元素之间留有空格

Question

我有一个这样的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>

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

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

Answer 1

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

通常，应该确保自己的代码设计成文本节点完全不相关-不管它们是否存在，代码都可以工作。这很容易做到。要记住的最大事情是parentNode.childNodes返回all子代的集合，包括文本节点，而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 + '"');

<div></div>

但是那真的很奇怪。尽管您确实可以这样做，但是它并没有完成任何有用的操作。

Answer 2

您遇到的问题与大多数人想要的相反。通常，由于white space