CODEWITHSUNDEEP
jqueryhtmlcss
liyuhao
liyuhao

Reputation: 375

Why html constructed by jquery show different from the original html?

I have an html file, like this:

<!doctype html>
<html>
<head>
    <script src='jquery.js'></script>
    <style>
    .some_list li {
        display: inline-block;
    }
    </style>
    <script>
    $(function() {
        $('#wrapper').append("<ul class='some_list'><li>a</li><li>b</li></ul>")
    });
    </script>
</head>
<body>
    <div id='wrapper'>
        <ul class='some_list'>
            <li>a</li>
            <li>b</li>            
        </ul>
    </div>
</body>

The result look like this:

a b
ab

The two ul all take the same css effect, but show differently.

Why this happened?

Upvotes: 0

Views: 49

Answers (2)

František Maša
František Maša

Reputation: 364

The main difference is that parser interprets newline as space.

So these are equivalent:

<ul class='some_list'><li>a</li> <li>b</li></ul>

$('#wrapper').append("<ul class='some_list'><li>a</li><li>b</li></ul>");

Output: ab

These two are equivalent too:

<ul class='some_list'>
    <li>a</li>
    <li>b</li>
</ul>

$('#wrapper').append("<ul class='some_list'>\n<li>a</li>\<li>b</li>\n</ul>");

Output: a b

Notice \n which means new line.

Upvotes: 0

Caio Kawasaki
Caio Kawasaki

Reputation: 2950

display: inline-block; has a small bug, you can not let the two tags .li without space otherwise they will join.

Put a space between your li tags:

$(function() {
        $('#wrapper').append("<ul class='some_list'><li>a</li> <li>b</li><li>c</li></ul>")
    });

Here you can see a better example: jsfiddle.net/ng67otm6

Upvotes: 1

Related Questions