Js和jQuery对节点的操作_JAVA_编程开发_程序员俱乐部

Js和jQuery对节点的操作

?

一.jQuery增加前后节点：

1.jsp:

?

class="xml" name="code"><p id="myNode">Hello World</p>
<button onclick="afterNode()">
    	后加节点
</button>
<button onclick="beforeNode()">
    	前加节点
</button>

?

2.js:

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

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

//前加结果：
<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 onclick="prependNode()">
    	内部最前加节点
</button>
<button onclick="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