文档处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
实例之复制样式条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div>
<script src="jquery-1.11.3.min.js"></script>
<script>
//var $clone_obj=$(self).parent().clone(); // $clone_obj放在这个位置可以吗?
function add(self){
// 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val("-").attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- <div class="c1">-->
<!-- <p>ppp</p>-->
<!-- </div>-->
<!-- <button>add</button>-->
<!-- <script src="jquery-3.3.1.js"></script>-->
<!-- <script>-->
<!-- $('button').click(function () {-->
<!-- // $('.c1').append('<h1>hello</h1>');-->
<!-- let $ele=$('<h1></h1>');-->
<!-- $ele.html('hello world');-->
<!-- $ele.css('color','red');-->
<!--// 标签内部插入-->
<!-- // $('.c1').append($ele); // 追加到p标签后面-->
<!-- // $ele.appendTo('.c1'); // 追加到p标签后面-->
<!-- // $('.c1').prepend($ele); // 追加到p标签前面-->
<!-- // $ele.prependTo('.c1'); // 追加到p标签前面-->
<!--// 标签外部插入-->
<!-- // $('.c1').after($ele); // 追加到div标签后面-->
<!-- // $ele.insertAfter('.c1'); // 追加到div标签后面-->
<!-- // $('.c1').before($ele); // 追加到div标签前面-->
<!-- // $ele.insertBefore('.c1'); // 追加到div标签前面-->
<!--// 替换-->
<!-- // $('p').replaceWith($ele); // 将创建的h1标签替换p标签-->
<!--// 删除-->
<!-- // $('.c1').empty(); // div标签还在-->
<!-- // $('.c1').remove(); // div标签已不存在-->
<!--// 复制-->
<!-- let $ele2=$('.c1').clone(); // 复制出来的标签都是一样的，连class属性也是，所以此时并不是一个一个的添加-->
<!-- $('.c1').after($ele2);-->
<!-- })-->
<!-- </script>-->
<!--实例之复制样式条-->
<div class="outer">
<div class="item">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
function add(self) {
let $ele3=$(self).parent().clone(); // 把onclick也复制了
$ele3.children('button').html('-').attr('onclick','remove(this)');
$('.outer').append($ele3);
};
function remove(self) {
$(self).parent().remove();
};
</script>
</body>
</html>