如何在JavaScript动态创建的元素之间添加空格？

你观察的没错，HTML里标签分两行写时，元素之间的换行/空格会被浏览器解析成一个空白字符，这就是两者间距的来源；而JS动态创建元素时，直接将元素插入DOM，中间没有额外的空白文本节点，所以没有间距。

要在JS里重现这种同排间距，有两种简单方法：

方法一：插入空白文本节点 #

在label和button之间手动创建一个包含空格的文本节点，模拟HTML里的空白字符：

const label = document.createElement("label");
label.htmlFor = `cash3`;
label.textContent = `Week 3:`;
const delBtn = document.createElement("button");
delBtn.textContent = 'Del';

// 关键：插入空白文本节点
const spaceNode = document.createTextNode(' ');
// 按顺序添加到目标容器（示例为body）
document.body.appendChild(label);
document.body.appendChild(spaceNode);
document.body.appendChild(delBtn);

方法二：用CSS margin控制间距（更推荐） #

直接给button设置左外边距，这种方式比依赖空白字符更灵活可控，还能自定义间距大小：

const label = document.createElement("label");
label.htmlFor = `cash3`;
label.textContent = `Week 3:`;
const delBtn = document.createElement("button");
delBtn.textContent = 'Del';
// 设置左外边距，数值可按需调整
delBtn.style.marginLeft = '8px';

document.body.appendChild(label);
document.body.appendChild(delBtn);

内容的提问来源于stack exchange，提问作者JAmes