Question

这个问题似乎太笼统了，以至于我不想在这里提出这个问题，但是我似乎很难找到有关给定问题的任何信息。当我尝试通过JavaScript点击功能（或根本没有点击）添加基本的HTML按钮（<input type="button">和<button>）时，给定的添加按钮将显示为不同。示例可以在下面找到：

我正在尝试在按钮之间保持均匀间距的情况下实现以下目标：

$(document).ready(function() {
	$("<button>Inserted</button>").insertAfter("button");
  //$("button").after("<button>Inserted</button>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
              Button 1
            </button>
<button>
              Button 2
            </button>
<button>
              Button 3
            </button>

JSFiddle

带有<button>元素的基本示例：

$(document).ready(function() {
  $("button").click(function() {
    var btn = document.createElement("button");
    var t = document.createTextNode("Added");
    btn.appendChild(t);
    document.body.appendChild(btn);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
              Button 1
            </button>
<button>
              Button 2
            </button>
<button>
              Button 3
            </button>

JSFiddle

带有<input>元素的基本示例：

$(document).ready(function() {
  $("input").click(function() {
    var btn = document.createElement("input");
    btn.setAttribute("type", "button");
    btn.setAttribute("value", "Added");
    document.body.appendChild(btn);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />

JSFiddle

是什么导致按钮元素以这种方式运行，或者被赋予元素缺少某些内容（例如，可能有任何属性）的原因？默认情况下，由HTML添加的应显示为按钮的元素具有一定的间距，但是通过JavaScript添加元素时就不会如此。还应注意，此间距因浏览器而异。我希望“ JavaScript添加的按钮”的行为类似于“ HTML添加的按钮”。

编辑：根据答案，问题显然是空白。

现在我的问题仍然存在：如何使JavaScript新添加的按钮的行为与HTML新添加的按钮的行为相同？是否有办法检测之间有多少空格并将其添加到按钮，以便它们始终具有相同的行为？

我知道空格通常是不需要的，应该避免，但我也想避免使用怪异的解决方案来使我的HTML正常工作，而默认情况下，当我不运行任何JavaScript时，我的HTML仍然可以正常工作。

Answer 1

因为您有nextSibling文本元素

$(document).ready(function() {
  $("input").click(function(el) {
    console.log(el.target.nextSibling ) // nextSibling space text
    var btn = document.createElement("input");
    btn.setAttribute("type", "button");
    btn.setAttribute("value", "Added");
    document.body.appendChild(btn);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />


<input type="button" value="no space 1" /><input type="button" value="no space 1" /><input type="button" value="no space 1" />

为什么添加JavaScript的按钮没有默认间距？

1 个答案: