动态添加的 html 与静态 html 的不同之处

Question

无法理解为什么动态 html 与静态 html 不同。在开发人员工具中查看时，输出似乎是相同的。

我想要的是让静态 html 看起来像动态添加的 html，因此元素之间没有间距。

$(document).ready(function () {
  var parentElement = $("#dynamic");
  parentElement.html("");
  var html = "";
  html += "<button>-</i></button>";
  html += "<input type='number' value='1' />";
  html += "<button>+</button>";
  $(html).appendTo(parentElement);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dynamic">
  
</div>

<div>
  <button>-</button>
  <input type='number' value='1' />
  <button>+</button>
</div>

Answer 1

在静态按钮的父 div 上使用显示 Flex 应该可以解决此问题。

$(document).ready(function () {
  var parentElement = $("#dynamic");
  parentElement.html("");
  var html = "";
  html += "<button>-</i></button>";
  html += "<input type='number' value='1' />";
  html += "<button>+</button>";
  $(html).appendTo(parentElement);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dynamic">
  
</div>

<div style="display:flex;">
  <button>-</button>
  <input type='number' value='1' />
  <button>+</button>
</div>