innerHTMLを追加すると、最初の要素のギャップが作成されます

Question

ユーザーがTabキーまたはSpaceキーを押すと、新しい入力フィールドがdiv要素に追加されます。

次は、入力フィールドを保持するために使用されるdiv要素の抜粋です：

<div class="container" id="container" onkeydown="KeyDown(event)"> 
    <input type="text" maxlength="15" id="0"/> 
</div> 

は次のように私は入力フィールドを追加するために使用していますJavaScriptコードです：

function KeyDown(e) { 
    var container = document.getElementById("container"); 

    if(e.which === 9 || e.which === 32) { //User pressed Tab or Space 
     container.innerHTML += "<input type='text' maxlength='15' id='0'/>"; 
    } 
} 

これは動作します最初のテキスト入力フィールドと2番目のテキスト入力フィールドの間に8pxのマージン/ギャップ（デフォルトCSSより4px多く）があります。 Chromeのすべての入力フィールドでページのCSSとHTMLが同一であっても、最初の入力フィールドのみが4ピクセル余分に余白があります。

問題は、以下のJavaScriptを使用して、コンテナのinnerHTMLのを交換することにより固定されている：HTMLで初期入力フィールドを追加しながら

if(c === 1) { //c is the number/count of input elements 
    container.innerHTML = "<input type='text' maxlength='15' id='0'/>"; 
} 

... 
c++; 

なぜこれがinnerHTMLプロパティし、それらを置き換える対、発生しました各入力フィールドを増分しますか？

Answer 1

2つの入力タグの間に空白があります（改行と書式のスペース）。これにより、余分な4ピクセルになる単一のスペースがレンダリングされます。

<div class="container" id="container" onkeydown="KeyDown(event)"> 
    <input type="text" maxlength="15" 
    id="0"/></div> 

恐ろしい書式設定ですが、タグ内の改行は書式設定されていません。 、数値IDが有効でないところで

function KeyDown(e) { 
    var container = document.getElementById("container"); 

    if(e.which === 9 || e.which === 32) { //User pressed Tab or Space 
     var newInput = document.createElement('input'); 
     newInput.id = "0"; 
     newInput.type = "text"; 
     newInput.maxlength = "15" 
     container.appendChild(newInput); 
    } 
} 

- それは文字で始まる必要があります。

は、私はあなたがinnerHTMLを操作するのではなく、新しい入力を追加する場合にも、空白を避けるかもしれないと思いますWhat are valid values for the id attribute in html。

Answer 2

最初のケースでは、DIVに空白がいくつかあります。

...keydown="KeyDown(event)"> [space] [space] [cr] [lf] 
[space] [space] <input type="text" max...> [space] [cr] [lf] 
[space] [space] [tab] </div> 

あなたは書くことがあります。返信用

<div ...><input ... /></div>