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