使用 JS 添加的按钮与使用 HTML 创建的按钮的间距不同

Question

JavaScript 添加的按钮必须与使用 HTML 创建的现有按钮对相同。

function hue() {
  var paragraph = document.createElement("p");

  var button3 = document.createElement("button");
  button3.innerHTML = "Button 3";

  var button4 = document.createElement("button");
  button4.innerHTML = "Button 4";

  paragraph.appendChild(button3);
  paragraph.appendChild(button4);

  var body = document.getElementById("body");
  body.appendChild(paragraph);
}

<body id="body">
  <p>
    <button>
        Button 1
    </button>
    <button>
        Button 2
    </button>
  </p>
  <p>
    <button onclick="hue()">
        Add
    </button>
  </p>
</body>

我对此做了一些研究，但没有找到任何解释。感谢您提供解决方案和（我会得到额外奖励）解释为什么会发生这种情况。

Answer 1

您在 HTML 中创建的按钮之间有空格。我将你的 fiddle 更改为：

        <button>Button 1</button><button>Button 2</button>

最后结果一模一样。

Answer 2

区别在于您的 HTML 在您的按钮元素之间包含空格（新行），而 JavaScript DOM您使用的方法不添加此空格。您可以看到删除标记中的空格会产生相同的结果：

function hue() {
  var paragraph = document.createElement("p");

  var button3 = document.createElement("button");
  button3.innerHTML = "Button 3";

  var button4 = document.createElement("button");
  button4.innerHTML = "Button 4";

  paragraph.appendChild(button3);
  paragraph.appendChild(button4);

  var body = document.getElementById("body");
  body.appendChild(paragraph);
}

<body id="body">
  <p>
    <button>Button 1</button><button>Button 2</button>
  </p>
  <p>
    <button onclick="hue()">Add</button>
  </p>
</body>

如果您希望按钮以某种方式间隔开，我强烈建议您按照您想要的方式设置它们的样式：

function hue() {
  var paragraph = document.createElement("p");

  var button3 = document.createElement("button");
  button3.innerHTML = "Button 3";

  var button4 = document.createElement("button");
  button4.innerHTML = "Button 4";

  paragraph.appendChild(button3);
  paragraph.appendChild(button4);

  var body = document.querySelector("body");
  body.appendChild(paragraph);
}

p {
  display: flex;
}

button {
  margin-inline: .2em;
}

<p>
  <button>Button 1</button>
  <button>Button 2</button>
</p>
<p>
  <button onclick="hue()">Add</button>
</p>

使用 JS 添加的按钮与使用 HTML 创建的按钮的间距不同

Buttons added with JS are not spaced the same as those created with HTML

javascript

html

web