jqueryでページに追加しようとすると要素がシフトしたのはなぜですか？

Question

jquery関数.after（）を使用してページにhtmlコードを追加しようとしましたが、追加された要素は純粋なhtmlで追加された要素と似ていません。なぜそれが起こり、この問題を解決するのか？ "Text"と入力の間のギャップは、挿入後に等しくありません。

$(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">