append()和appengTo()：在现存元素内部，从后面插入
prepend()和prependTo()：在现存元素外部，从前面插入
after()和insertAfter()：在现存元素外部，从后面插入
before()和insertBefore():在现存元素外部，从前面插入
新建节点的插入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { // $('#div1').html('')这种用字符串的方式塞进去的性能是最高的， // 但是有点时候不方便用，因为这样会重写div1里面的元素 $a=$('<a href="#" >链接</a>>'); $('#div1').append($a);/*在最后加入字符串，append从现成的元素的后面插入元素*/ $a.appendTo($('#div1'));/*和append效果相同*/ $p=$('<p>这是一个p标签</p>'); $("#div1").prepend($p); $h2=$('<h2>这是一个h2</h2>'); $('#div1').after($h2); $h3=$('<h3>这是一个h3</h3>'); $('#div1').before($h3); }) </script> </head> <body> <div> <h1> 这是一个h1元素</h1> </div> </body> </html>
已有节点的插入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#p1').insertBefore($("#title01"));/*换两个节点顺序*/ }) </script> </head> <body> <h1>这是一个h1元素</h1> <p>这是一个p元素</p> <span>这是一个span元素</span> </body> </html>
删除节点
remove()：删除节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#p1').insertBefore($("#title01"));/*换两个节点顺序*/ $('#p1').remove(); }) </script> </head> <body> <h1>这是一个h1元素</h1> <p>这是一个p元素</p> <span>这是一个span元素</span> </body> </html>
关于a标签的问题
<a href="javascript:alert('ok?');" >链接</a>
如果这样写就是插入JavaScript语句，弹出ok，如果是写#就是连接到页面顶部。
todolist网页
实现一个用户自己列计划的网页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>todolist</title> <style type="text/css"> .list_con { width: 400px; margin: 50px auto 0; } .inputtxt { width: 350px; height: 30px; border: 1px solid #ccc; padding: 0px; text-indent: 10px; } .inputbtn { width: 40px; height: 32px; padding: 0px; border: 1px solid #ccc; } .list { margin: 0; padding: 0; list-style: none; margin-top: 20px; } .list li { height: 30px; line-height: 30px; border-bottom: 1px solid #ccc; } .list li span { float: left; } .list li a { float: right; text-decoration: none; margin: 0 10px; } </style> <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function () { var $inputtxt = $('#txt1'); var $btn = $('#btn1'); var $ul = $('#list'); $btn.click(function () { var $val = $inputtxt.val(); /*获取input框的值*/ if ($val == "") { alert("请输入内容"); return; } else { alert(1); var $li=$('<li><span>'+$val+'</span><a href="javascript:;"> ↑ </a><a href="javascript:;"> ↓ </a><a\n' + ' href="javascript:;">删除</a></li>'); $li.appendTo($ul); $inputtxt.val("");/*获取到值之后，清空*/ var $a=$li.find('.del'); $a.click(function () { $(this).parent().remove(); }); $li.find('.up').click(function () { $(this).parent().insertBefore($(this).parent().prev()); }); $li.find('.down').click(function () { $(this).parent().insertAfter($(this).parent().next()); }); } }); $del=$(".del"); $del.click(function () { $(this).parent().remove(); }); $('.up').click(function () { $(this).parent().insertBefore($(this).parent().prev()); }); $('.down').click(function () { $(this).parent().insertAfter($(this).parent().next()); }); }) </script> </head> <body> <div> <h2>To do list</h2> <input type="text"> <input type="button" value="增加"> <ul> <li><span>学习html</span><a href="javascript:;"> ↑ </a><a href="javascript:;"> ↓ </a><a href="javascript:;">删除</a></li> <li><span>学习css</span><a href="javascript:;"> ↑ </a><a href="javascript:;"> ↓ </a><a href="javascript:;">删除</a></li> <li><span>学习javascript</span><a href="javascript:;"> ↑ </a><a href="javascript:;"> ↓ </a><a href="javascript:;">删除</a></li> </ul> </div> </body> </html>