동적으로 삽입 된 내용에 대해 공백이 사라짐

Question

사용자가 원하는 수에 따라 필드를 만들거나 제거하는 간단한 javascript 설정이 있습니다. 그러나 사용자가 추가 버튼을 클릭하여 다른 필드를 만들면 필드와 요소 사이의 간격이 완전히 사라집니다. 여백이나 여백이 적용되지 않으며 여백을 적용하더라도 차이가 여전히 남아 있습니다. 여기

여기 보이는 방법

<div class="tax-cont"> 
    <input type="text" class="form-control inline-field md" placeholder="Tax Name"> 
    <div class="input-group inline-group md"> 
    <input type="text" class="form-control" placeholder="Value"> 
    <label class="input-group-addon"><i class="fa fa-percent"></i></label> 
    </div> 
    <a class="addRemove btn btn-success btn-round btn-sm"><i class="fa fa-plus"></i></a> 
</div> 

반복 년대 부분 그리고 자바 스크립트

// Add or Remove additional departure dates 
    var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name"><div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div><a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>'; 

    $('.tax-cont .addRemove.btn-success').on('click', function(){ 
    var lastTaxbox = $('.tax-cont').last(); 
    lastTaxbox.after($(taxContent)); 
    }); 
    $('.form-group').on('click', '.btn-danger', function(){ 
    $(this).parent().remove(); 
    }); 

의

이 전혀 일어나고있는 이유를 알아낼 수 없습니다 . 설명 할 내용은 codepen입니다.

Answer 1

공백에 관해서는 inline 및 inline-block 요소가 동작하기 때문에 이러한 현상이 발생합니다. 원래 html 소스에는 <input>과 <div> 사이에 새로운 라인이 있습니다. 공백이며 페이지의 두 요소 사이에 공백이 생깁니다. 당신이 당신의 DOM에 요소를 추가하기 위해 자바 스크립트를 사용할 때

<input type="text" class="form-control inline-field md" placeholder="Tax Name"> <!-- new line --> 
<div class="input-group inline-group md"> ... </div> 

그러나, node 추가에 공백이 없습니다. 그러면 두 개를 붙이면됩니다. 원본 소스에서 새 행을 제거하면 두 입력이 함께 고정됩니다. 모든 행이 동일한 간격을 유지하고 있는지 확인하기 위해 다음과 같은 <div>에 <input> 또는 margin-left에 margin-right를 사용할 수있는 솔루션으로

.

Answer 2

삽입 된 집합 사이에 공백이없는 이유는 다른 사람들이 지적했듯이 코드 사이에 공백이 없기 때문입니다. 잘 설명하는 link을 공유 한 nicholas에게 감사드립니다.

문제를 해결하기 위해 원래 DOM과 동일한 공간을 생성하는 자바 스크립트 코드 ( )에 공백을 추가했습니다.

var taxContent = '<div class="tax-cont"><input type="text" class="form-control inline-field md" placeholder="Tax Name">&nbsp;<div class="input-group inline-group md"><input type="text" class="form-control" placeholder="Value"><label class="input-group-addon"><i class="fa fa-percent"></i></label></div>&nbsp;<a class="addRemove btn btn-danger btn-round btn-sm"><i class="fa fa-minus"></i></a></div>';