代码之家 › 专栏 › 技术社区 › Gustavo Vasconcellos

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

web html javascript

Gustavo Vasconcellos · 技术社区 · 4 年前

添加的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/

我对此做了一些研究,但没有找到任何解释。我感谢您提供的解决方案和(我很乐意)解释为什么会出现这种情况。

谢谢你的关注。

2 回复 | 直到 4 年前

Herms 4 年前

在HTML中创建的按钮之间有空格。我把你的小提琴改成:

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

结果一模一样。

Zach Jensz 4 年前

区别在于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>

推荐文章

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

Loopy Momy · 当我尝试制作动画时,CSS可见性和块不起作用

2 年前

Ebrahim Momin · div第一次向下滑动它包含的子元素时,首先出现JQuery

2 年前

dds · Bootstrap下拉菜单导航栏

2 年前

TUTORIAL Boss -Channel · 我是网络编程的新手,我有以下问题需要解释[关闭]

2 年前

big boi · 如何使php标记可以在js脚本和php代码中运行?复制

2 年前

ShashidharM · React Redirect在本地工作,但在Vercel上为404

2 年前

Clément Maurice · 在php中更新我的网站上的颜色时出现问题

2 年前

IITU Yernur · Angular 18中不显示图像

2 年前

ahmed ahmedx · 如何正确居中放置卡片

2 年前