Js和jQuery对节点的操作

Js和jQuery对节点的操作

 

一.jQuery增加前后节点：

1.jsp:

 

<p id="myNode">Hello World</p>
<button οnclick="afterNode()">
    	后加节点
</button>
<button οnclick="beforeNode()">
    	前加节点
</button>

 

2.js:

//前面增加
function beforeNode() {
	$("#myNode").before('<p>Before Hello World</p>');
}

//后面增加
function afterNode() {
	$("#myNode").after('<p>AfterHello World</p>');
}

3.结果：

//前加结果：
<p>Before Hello World</p>
<p id="myNode">Hello World</p>


//后加结果
<p id="myNode">Hello World</p>
<p>After Hello World</p>

 

二.jQuery在节点内部最后增加节点：

1.jsp:

<p id="myNode">Hello World</p>
<p id="myNode">Hello World</p>
<button οnclick="prependNode()">
    	内部最前加节点
</button>
<button οnclick="appendNode()">
    	内部最后加节点
</button> 

 

2.js:

//内部最后增加
function appendNode() {
	$("#myNode").append('<b>Append Hello World</b>');
        //反向增加：
        //$("<b>你好吗？</b>").prependTo("p");//将《b》前置到p元素中 
}
//内部最前增加
function prependNode() {
	$("#myNode").prepend('<p>Prepend Hello World</p>');
        //反向增加
        //$("<b>你好吗？</b>").appendTo("p");//将《b》前置到p元素中 
}

 

3.结果:

//内部最前加节点结果：
<p id="myNode">
    <b>Prepend Hello World</b>
    Hello World
</p>

//内部最后加节点结果：
<p id="myNode">
    Hello World
    <b>Append Hello World</b>
</p>

 

 

三.替换节点：

// $("p").replaceWith("<strong>你最不喜欢的水果是？</Strong>");

 

 

参考：http://www.jb51.net/article/41130.htm