jQuery了解与应用插入节点

插入节点

元素内部插入子节点

1.append(content)

$(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

2.insertAfter(content)

$(A). insertAfter (B)表示将A插入到B之后

如：$newNode1.insertAfter(“ul”);

3.before(content)

$(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

4.insertBefore(content)

$(A). insertBefore (B)表示将A插入到B之前

如：$newNode1.insertBefore(“ul”);

元素外部插入同辈节点

1.after(content)

$(A).after (B)表示将B插入到A之后

如：$("ul").after($newNode1);

2.insertAfter(content)

$(A). insertAfter (B)表示将A插入到B之后

如：$newNode1.insertAfter(“ul”);

3.before(content)

$(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

4.insertBefore(content)

$(A). insertBefore (B)表示将A插入到B之前

如：$newNode1.insertBefore(“ul”);

<script>
        $(function(){
            $("h1").click(function(){
                //创建新的li标签
                var $li=$("<li>新欢</li>")
                //获取当前的ul
                var $ul=$("ul");
                //父.append(子)
                //$ul.append($li);
                //子.appendTo(父)
                //$li.appendTo($ul);
                //父.prepend(子)
                //$ul.prepend($li);
                //子.prependTo(父)
                //$li.prependTo($ul);
                //获取第二个li
                var $li2=$("li:eq(1)");
                //前.after.(后)
                //$li2.after($li);
                //后.insertAfter(前)
                $li.insertAfter($li2);
                $li2.before($li);
                $li.insertBefore($li2);

            })
        })
    </script>