使用JQ来改变HTML文档的几种方法

首先还是给出代码清单：
现有如下的HTML页面

<div id="test">
    <h2>hello</h2>
</div>

JS代码如下：

$(document).ready(function(){
    var test = $('#test');
    var h1 = $('<h1>HI HOW A U?</h1>');
    /*h1.insertAfter(test);
    h1.insertBefore(test);*/
    h1.prependTo(test);
});

JQ提供的$()是非常强大的，他不仅可以用来选择元素节点，还可以创建Html标签片段：

var h1 = $('<h1>HI HOW A U?</h1>');

这相当于把JS中的createElement() ，createTextNode() ，appendChild() 合并封装在一个简简单单的$() 里面，你不得不赞叹JQ的强大。

但是现在创建的代码片段还只是游离在JS代码世界中，并没有放到html页面上。JQ提供了几种方法：
insertAfter() ，insertBefore()， prependTo() ，addpengTo()
前两种是把片段（节点？）插入到参数元素的“外部”：

var test = $('#test');
var h1 = $('<h1>HI HOW A U?</h1>');
h1.insertAfter(test);

这里的意思是把h1插入到test的外部，id为test的块并没有包含新建的h1。
而后两种是吧片段插入到参数元素的“内部”：

    var test = $('#test');
    var h1 = $('<h1>HI HOW A U?</h1>');
    h1.prependTo(test);

此时test包含h1。

相比JS实现同样功能而编写的长长一段代码，JQ确实强大。
JQ可以用更简单的方法实现更多功能：

（1）移动元素：
假设现在的HTML页面代码如下：

<div id="test">
    <h2>hello</h2>
    <h3 id="love">love</h3>
</div>

我想把h3移到test块的外部的上面：

$(document).ready(function(){
    var test = $('#test');
    var love = $('#love');
    love.insertBefore(test);
});

就这样,如果不想定义变量甚至一行代码就可以完成。
如果想获取某个元素里的内容，或者改变里面的内容，可以用text()或者html() ：

$(document).ready(function(){
    var test = $('#test');   
    var love = $('#love');
    love.insertBefore(test);
    love.text("bala");
});