创建新元素非常简单，只需要把要创建的元素的HTML代码（以字符串的形式）作为参数传递给$()函数即可。

$('<a href="$">newA</a>');

以上代码中，通过向$()函数传递一段字符串，创建了一个链接“newA”。但是这只是创建了一个链接，并没有将其加入到页面文档流中（就像只定义函数，没有调用一样），因此在页面中并不能看到这个新链接。要想看到新链接“newA”，需要将其插入到DOM树中。

将元素插入DOM树中的方法有多种，常用的有以下几种：

• .insertBefore() 将新元素插入到现有元素外部、之前。

• .insertAfter() 将新元素插入到现有元素外部、之后。

• .prependTo() 将新元素插入到现有元素内部、之前。

• .appendTo() 将新元素插入到现有元素内部、之后。

可以通过以下示例解释它们之间的具体用法及区别。

HTML代码如下：

<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<p class="p4">p4</p>
<a href="#">insertA</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('a').click(function () {
        $('<a href="$">newA1(外部、之前)</a>').insertBefore('p.p1');
        $('<a href="$">newA2(外部、之后)</a>').insertAfter('p.p2');
        $('<a href="$">newA3(内部、之前)</a>').prependTo('p.p3');
        $('<a href="$">newA4(内部、之后)</a>').appendTo('p.p4');
        return false;
    });
});

代码运行页面效果：

网页代码效果：

我们既可以将新元素插入某个元素前后，反过来，也可以在某个元素前后插入新元素，这里只是看事情的角度问题。

要在某个元素前后插入新元素，可以使用插入元素方法的“反向方法”：

• .before() 在现有元素外部、之前插入新内容，.insertBefore()的“反向方法”。

• .after() 在现有元素外部、之后插入新内容，.insertAfter()的“反向方法”。

• .prepend() 在现有元素内部、之前插入新内容，.prependTo()的“反向方法”。

• .append() 在现有元素内部、之后插入新内容，.appendTo()的“反向方法”。

将插入元素方法全部转换为反向方法后，代码如下：

$(document).ready(function () {
    $('a').click(function () {
        $('p.p1').before($('<a href="$">newA1(外部、之前)</a>'));
        $('p.p2').after($('<a href="$">newA2(外部、之后)</a>'));
        $('p.p3').prepend($('<a href="$">newA3(内部、之前)</a>'));
        $('p.p4').append($('<a href="$">newA4(内部、之后)</a>'));
        return false;
    });
});

以上代码的效果与之前“正向方法”的效果一样。

移动元素就是将一个已经存在的元素由原位置移动到另一个新位置，也就是调整元素在DOM树中的位置。要实际移动元素只需要两步：1、找到目标元素。2、使用插入方法插入到新位置。

HTML代码如下：

<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<p class="p4">p4</p>
<a href="#">moveP1ToP3</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('a').click(function () {
        $('p.p1').insertAfter('p.p3');
        return false;
    });
});

代码运行后的页面效果：

p.p1元素通过.insertAfter()方法插入到了p.p3元素之后，从而实现了p1元素的移动。

如果要将某个或某些元素加入到一个有序列表或无序列表中，就需要使用.wrapAll()方法和.wrap()方法。

HTML代码如下：

<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>
<p class="p4">p4</p>
<a href="#">wrap</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('a').click(function () {
        $('p').wrapAll('<ol></ol>').wrap('<li></li>');
        return false;
    });
});

代码运行后的页面效果：

网页代码效果：

以上代码中，当链接a被点击后，选择所有p元素，首先使用.wrapAll()方法把它们都包含在一个<ol>中，然后再使用.wrap()方法将每一个p元素分别包装在自己的<li>中。

要删除元素可以使用.empty()方法和.remove()方法。.empty()方法会删除匹配元素的所有子元素；.remove()方法会删除匹配元素本身及其所有子元素。

HTML代码如下：

<div class="delete1">
    <p>This is one.</p>
</div>
<div class="delete2">
    <p>This is two.</p>
</div>
<a href="#" id="d1">deleteOne</a>
<a href="#" id="d2">deleteTwo</a>

对应的JavaScript代码如下：

$(document).ready(function () {
    $('#d1').click(function(){
        $('div.delete1').empty();
        return false;
    });
    $('#d2').click(function(){
        $('div.delete2').remove();
        return false;
    });
});

以上代码中，在HTML部分分别定义了两个div元素和两个链接a。在JavaScript部分，当第一个链接（id为“d1”）被点击后，使用.empty()方法删除div.delete1；当第二个链接（id为“d2”）被点击后，使用.remove()方法删除div.delete2。

通过对比结果，使用.empty()方法删除的div.delete1的div标签本身仍然存在；而使用.remove()方法删除的div.delete2则完全消失了。