爲什麼當我嘗試通過jQuery將它們添加到頁面上時，元素會發生移位？

Question

我嘗試通過使用jquery函數.after（）在頁面上添加html代碼，但添加的元素看起來不像通過純html添加的元素。爲什麼會發生這種情況，以及如何解決這個問題？ 插入後，「文本」與輸入之間的差距不相等。

$(document).ready(function() { 
 
    $("#b").on('click', function() { 
 
     var html = "" 
 
     + "<div>" 
 
     + "<span>Text:</span>" 
 
     + "<input type='text' />" 
 
     + "</div>"; \t \t \t 
 
     $('#xxx').after(html); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 

 
<div style="width: 350px"> 
 
    <div id='xxx'> 
 
    <span>Text:</span> 
 
    <input type='text' /> 
 
    </div> 
 
</div> 
 

 
<input id='b' type="button" value="Insert">

Answer 1

這是由於span和input之間的空白。如果你想將差距縮小到留在你的JS字符串添加它們之間的空間：

$(document).ready(function() { 
 
    $("#b").on('click', function() { 
 
     var html = "<div>" 
 
     + "<span>Text:</span> " // add space at the end here 
 
     + "<input type='text' />" 
 
     + "</div>"; \t \t \t 
 
     $('#xxx').after(html); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div style="width: 350px"> 
 
    <div id='xxx'> 
 
    <span>Text:</span> 
 
    <input type='text' /> 
 
    </div> 
 
</div> 
 
<input id='b' type="button" value="Insert">

Answer 2

。在你現有的html

空間檢查更新的代碼

$(document).ready(function() { 
 
    $("#b").on('click', function() { 
 
     var html = "" 
 
     + "<div>" 
 
     + "<span>Text:</span>" 
 
     + "<input type='text' />" 
 
     + "</div>"; \t \t \t 
 
     $('#xxx').after(html); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 

 

 
<div style="width: 350px"> 
 
    <div id='xxx'> 
 
    <span>Text:</span><input type='text' /> 
 
    </div> 
 
</div> 
 

 
<input id='b' type="button" value="Insert">