jquery中的dom操作
废话不说：直接上例子：
1.添加节点-html页面
|
Append:向每个匹配的元素内部追加内容。 |
|
<body> <ul id="city"> <li id="bj" name="beijing">北京</li> <li id="cq" name="chongqing">重庆</li> </ul> <br> <input type="button" value="添加"> </body> Js代码 <script language="JavaScript"> /** * 创建一个li节点<li id="tj" name="tianjing">天津</li>，追加到最后的li节点的后面 */ $("input[type='button']").click(function(){ /** * 1、创建一个节点li * 2、设置两个属性 */ var $li = $("<li/>").attr("id","tj").attr("name","tianjing").attr("aaa","bbbb").text("天津"); $("ul").append($li);//在<ul>内部添加元素 }); </script> |
|
appendTo：把所有匹配的元素追加到另一个指定的元素元素集合中。 |
|
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。 |
|
代码示例： HTML 代码: <p>I would like to say: </p><div></div><div></div> jQuery 代码: $("p").appendTo("div"); 结果: <div><p>I would like to say: </p></div><div><p>I would like to say: </p></div> |
|
prepend(content) 向每个匹配的元素内部前置内容 |
|
示例 描述: 向所有段落中前置一些HTML标记代码。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").prepend("<b>Hello</b>"); 结果: [ <p><b>Hello</b>I would like to say: </p> ] |
|
prependTo(content) |
|
把所有匹配的元素前置到另一个、指定的元素元素集合中。 示例 描述: 把所有段落追加到ID值为foo的元素中。 HTML 代码: <p>I would like to say: </p><div id="foo"></div> jQuery 代码: $("p").prependTo("#foo"); 结果: <div id="foo"><p>I would like to say: </p></div> |
|
返回值:jQueryafter(content) 在每个匹配的元素之后插入内容。 |
|
示例 描述: 在所有段落之后插入一些HTML标记代码。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").after("<b>Hello</b>"); 结果: <p>I would like to say: </p><b>Hello</b> |
|
返回值:jQuerybefore(content)在每个匹配的元素之前插入内容。 |
|
示例 描述: 在所有段落之前插入一些HTML标记代码。 HTML 代码: <p>I would like to say: </p> jQuery 代码: $("p").before("<b>Hello</b>"); 结果: [ <b>Hello</b><p>I would like to say: </p> ] |
|
insertAfter(content)把所有匹配的元素插入到另一个、指定的元素元素集合的后面。 |
|
示例 描述: 把所有段落插入到一个元素之后。与 $("#foo").after("p")相同 HTML 代码: <p>I would like to say: </p><div id="foo">Hello</div> jQuery 代码: $("p").insertAfter("#foo"); 结果: <div id="foo">Hello</div><p>I would like to say: </p> |
替换：
|
replaceWith(content) 返回值jQuery将所有匹配的元素替换成指定的HTML或DOM元素。 |
|
示例 描述: 把所有的段落标记替换成加粗的标记。 HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("p").replaceWith("<b>Paragraph. </b>"); 结果: <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> 描述: 用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。 HTML 代码: <div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div></div> jQuery 代码: $('.third').replaceWith($('.first')); 结果: <div class="container"> <div class="inner second">And</div> <div class="inner first">Hello</div></div> |
|
replaceAll(selector)用匹配的元素替换掉所有 selector匹配到的元素。 |
|
HTML 代码: <p>Hello</p><p>cruel</p><p>World</p> jQuery 代码: $("<b>Paragraph. </b>").replaceAll("p"); 结果: <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> 删除节点 |
|
empty() 删除匹配的元素集合中所有的子节点。 返回值:jQuery |
|
示例 描述: 把所有段落的子元素（包括文本节点）删除 HTML 代码: <p>Hello, <span>Person</span> <a href="#">and person</a></p> jQuery 代码: $("p").empty(); 结果: <p></p> |
|
返回值:jQueryremove([expr]) 用于筛选元素的jQuery表达式、 |
|
示例 描述: 从DOM中把所有段落删除 HTML 代码: <p>Hello</p> how are <p>you?</p> jQuery 代码: $("p").remove(); 结果: how are |
|
返回值:jQuerydetach([expr])从DOM中删除所有匹配的元素。 |
|
示例 描述: 从DOM中把所有段落删除 HTML 代码: <p>Hello</p> how are <p>you?</p> jQuery 代码: $("p").detach(); 结果: how are |