jquery 元素的创建与插入

Question

在看锋利的jQuery 做了关于动态元素的创建与插入的练习

<ul id="ul">
            <li title="苹果">苹果</li>
            <li title="橘子">橘子</li>
            <li title="菠萝">菠萝</li>
        </ul>

            $("html"); // 创建一个dom对象
            //创建一个空的li元素节点
            var $li_1 = $("<li></li>");
            //创建一个带文本节点的li元素节点
            var $li_2 = $("<li>香蕉<li>");
            // 创建一个带有属性节点 文本节点的 li元素节点
            var $li_3 = $("<li tltle = '香蕉'>香蕉<li>");
            
            //插入节点
            // append()方法  向匹配元素内部追加元素
            $ul.append($li_1).append($li_2).append($li_3);

结果发现空li标签多次重复

Answer 1

未写闭合标签

Answer 2

后面的$li_2 和 $li_3 没有闭合
插入可以写在一起 $ul.append($li_1,$li_2,$li_3)

Answer 3

//创建一个带文本节点的li元素节点
var $li_2 = $("<li>香蕉<li>"); //后面的<li>应该改成</li>

双标签元素，结尾标签加斜杠，比如<div></div> <span></span>
未闭合的标签在高版本浏览器会被识别为两个元素，比如<li>香蕉<li>在实际编译后会被识别为<li>香蕉</li><li></li>

Answer 4

<li>香蕉<li>应该为<li>香蕉</li>，注意看闭合标签，前面是<li>后面应该是</li>