CODEWITHSUNDEEP
jqueryappend
土豆丫
土豆丫

Reputation: 7165

css missing margin after jquery append

I have used jQuery's .append() function to create a set of divs which wrap some <input /> and <span>, but after I create the divs, it missing the margin between <input> tag,just as the following picture:

image with margin: enter image description here

image without margin(jquery create): enter image description here

the html code:

<div class="controls">
    <input type="text" class="span3" name="name" placeholder="规格名称" />
    <input type="text" class="span3" name="name" placeholder="商品价格" />
    <input type="text" class="span3" name="name" placeholder="商品原价" />
    <input type="text" class="span2" name="name" placeholder="商品库存" />
    &nbsp;&nbsp;&nbsp;
    <span id="good_sku_add" class="icon-plus"></span>
</div>

the jquery code:

$('#good_sku_add').click(function(){
    html = '';
    html += '<div class="controls">';
    html += '<input type="text" class="span3" name="name" placeholder="规格名称" />';
    html += '<input type="text" class="span3" name="name" placeholder="商品价格" />';
    html += '<input type="text" class="span3" name="name" placeholder="商品原价" />';
    html += '<input type="text" class="span2" name="name" placeholder="商品库存" />';
    html += '&nbsp;&nbsp;&nbsp;';
    html += '<span id="good_sku_add" class="icon-plus"></span>';
    html += '</div>';

    $(this).parent().after(html);
    $(this).parent().parent().trigger('create');
  })

I search some doc on stackoverflow and google,but it can't work,can anyone give me some idea?

Upvotes: 0

Views: 1221

Answers (2)

j08691
j08691

Reputation: 207919

That's not the margin that's missing, what's missing is just a space between your inputs (inline elements are sensitive to white space). Just add one in at the end of each line of your input code:

html += '<input type="text" class="span3" name="name" placeholder="规格名称" /> ';
                                                                              ^

jsFiddle example

Upvotes: 2

jmar777
jmar777

Reputation: 39659

You're missing spaces between the <input /> tags in the dynamically created version.

E.g., try this:

html = '';
html += '<div class="controls"> ';
html += '<input type="text" class="span3" name="name" placeholder="规格名称" /> ';
html += '<input type="text" class="span3" name="name" placeholder="商品价格" /> ';
html += '<input type="text" class="span3" name="name" placeholder="商品原价" /> ';
html += '<input type="text" class="span2" name="name" placeholder="商品库存" /> ';
html += '&nbsp;&nbsp;&nbsp;';
html += '<span id="good_sku_add" class="icon-plus"></span>';
html += '</div>';

Explanation:

In the HTML version, the leading whitespace (indentation) before the <intput /> tags is collapsed to a single whitespace character when rendered. In your HTML version, due to the string concatenation approach, there's no whitespace at all between the tags.

A (subjectively) cleaner approach might be to try this:

var html = [
    '<div class="controls">',
    '<input type="text" class="span3" name="name" placeholder="规格名称" />',
    '<input type="text" class="span3" name="name" placeholder="商品价格" />',
    '<input type="text" class="span3" name="name" placeholder="商品原价" />',
    '<input type="text" class="span2" name="name" placeholder="商品库存" />',
    '&nbsp;&nbsp;&nbsp;',
    '<span id="good_sku_add" class="icon-plus"></span>',
    '</div>'
].join(' ');

Upvotes: 1

Related Questions