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>小提琴：https ://jsfiddle.net/gustavovasconcellos/35oq6mzp/40/
我已經對此進行了一些研究，但沒有找到任何解釋。我感謝您的解決方案和（我會是獎勵）解釋為什么會發生這種情況。
感謝您的關注。
uj5u.com熱心網友回復：
您在 HTML 中創建的按鈕之間有空格。我將您的小提琴更改為：
<button>Button 1</button><button>Button 2</button>
他們最終是相同的。
uj5u.com熱心網友回復：
不同之處在于您的 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463629.html
標籤：javascript html 网络