实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//添加和修改元素的方法
$(function(){
$('div').on('click',function(){
// 1.append()参数的内容可以是包含标签的文本 内容是div在标签内的 且在原有内容的之后
$(this).append('<h1>aacc</h1>')
// 2.after()参数的内容可以是包含标签的文本 内容是在div标签后面的
$(this).after('<h1 style="color:red">aacc</h1>')
// 3.before()参数的内容可以是包含标签的文本 内容是在div标签后面的
$(this).before('<h1 style="color:blue">aacc</h1>')
// 4.prepend()参数的内容可以是包含标签的文本 内容是div在标签内的 且在原有内容的之前
$('div').prepend('<h1 style="color:green">aacc</h1>')
// 5.替换原来的结构且可替换内容 语法replaceWith(content|fn)
$('div').replaceWith('<h1 style="color:green;font-size: 1.5em;">'+$(this).text()/* 语法 text([val|fn])*/+'</h1>').place
//
})
// 6.删除元素的方法 remove()
$('div').remove()
})
</script>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: lemonchiffon;
margin: auto;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box">
原来的内容
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
