JQuery添加li元素导致错位

Question

这让我抓狂，jquery 添加一个简单的 li 元素到 ul 中，导致 jquery 添加的 li 元素与作为原始 DOM 一部分的元素不一致。

运行 JS Fiddle 并单击“添加新”。 原始 DOM 中的 li 子元素与 jquery 添加的子元素实际上是相同的，并且我在 chrome 检查器中看不到任何填充差异。

请参阅顶部的 2 个 jquery 添加的 li 元素的对齐问题图像。

https://jsfiddle.net/advocate/hg8z0kvm/

(function() {

  $('#addnew').click(function() {

    htmlCode = "<li>" +
      "<input type=\"checkbox\">" +
      "<input type=\"text\" name=\"desc\" placeholder=\"Description...\">" +

      "</li>";
    $("#thelist").prepend(htmlCode);


  });

})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <ul id="thelist">
    <li>
      <input type="checkbox">
      <input type="text" name="desc" placeholder="Enter Desc...">
    </li>
    <li>
      <input type="checkbox">
      <input type="text" name="desc" placeholder="Enter Desc...">
    </li>
  </ul>
</form>
<input type="submit" id="addnew" value="AddNew">

Answer 1

问题是 HTML 代码上的空格。您可以从标签之间的 html 中删除它们，并且不再有任何区别:

(function() {

  $('#addnew').click(function() {

    htmlCode = "<li>" +
      "<input type=\"checkbox\">" +
      "<input type=\"text\" name=\"desc\" placeholder=\"Description...\">" +
      "<input type=\"url\" name=\"url\" placeholder=\"URL...\">" +
      "</li>";
    $("#thelist").prepend(htmlCode);

  });

})();

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

    <li>
      <input type="checkbox"><input type="text" name="desc" placeholder="Enter Desc..."><input type="url" name="url" placeholder="URL">
    </li>
    <li>
      <input type="checkbox"><input type="text" name="desc" placeholder="Enter Desc..."><input type="url" name="url" placeholder="URL">
    </li>

  </ul>
</form>

<input type="submit" id="addnew" value="AddNew">