Question

我有一个html文件，如下所示：

<!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>

结果如下：

a b
ab

两个ul都采用相同的css效果，但显示方式不同。

为什么会这样？

Answer 1

display：inline-block;有一个小bug，你不能让两个标签.li没有空格，否则他们会加入。

在li标签之间加一个空格：

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

您可以在此处看到更好的示例：jsfiddle.net/ng67otm6

Answer 2

主要区别在于解析器将换行解释为空格。

所以这些是等价的：

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

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

输出： ab

这两个也是等同的：

<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>");

输出 a b

注意 \ n 表示新行。

为什么jquery构造的html显示与原始html不同？

2 个答案: