1. 程式人生 > >3.29 學前端 jquery之操作元素之文件處理

3.29 學前端 jquery之操作元素之文件處理

3.3 文件處理
內部插入

$("#c1").append("<b>hello</b>");//把hello插入#c1到最後一項
$("p").appendTo("div"); //包p插入到div中

prepend();//插入到最上面項
prependTo()

外部插入

before()
insertBefore()
after()
insertAfter()

replaceWith() 
remove()
empty()
clone()

例項 clone方法的應用

<!DOCTYPE html>
<html lang="en">
<head
>
<meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="outer"> <div class="condition"> <div class="icons" style="display:inline-block"> <a onclick="add(this);"><button>+</button
>
</a> </div> <div class="input" style="display:inline-block"> <input type="checkbox"> <input type="text" value="alex"> </div> </div> </div> <script src="js/jquery-2.2.3.js"
>
</script> <script> function add(self){ var $duplicate = $(self).parent().parent().clone(); $duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-"); $duplicate.appendTo($(self).parent().parent().parent()); } function removed(self){ $(self).parent().parent().remove() } </script> </body> </html>