添加元素
建立元素经历的过程:
1.建立元素
2.为元素添加文本或属性
3.将元素追加到DOM中
添加元素以下几个方法:
| 方法 | 说明 |
| append() | 在选择元素的子元素后面追加。由选择的元素调用这个函数，函数中的参数是新元素。 |
| prepend() | 在选择元素的子元素前面追加。由选择的元素调用这个函数，函数中的参数是新元素。 |
| after() | 在选择元素的后面添加。由选择的元素调用这个函数，函数中的参数是新元素。 |
| before() | 在选择元素的后面添加。由选择的元素调用这个函数，函数中的参数是新元素。 |
| appendTo() | 将新元素追加到选择元素的子元素后面。由新创建的元素调用这个方法，函数中的参数是选择的元素。 |
| prependTo() | 将新元素追加到选择元素的子元素前面。由新创建的元素调用这个方法，函数中的参数是选择的元素。 |
<!DOCTYPE html>
<html>
<head>
<title>append</title>
<meta charset="UTF-8">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click',function(){
var pel="<p>全面深化改革</p>";
$('div').append(pel);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prepend</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click',function(){
var pel="<p>全面深化改革</p>";
$('div').prepend(pel);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>after</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click',function(){
var pel="<p>全面深化改革</p>";
$('div').after(pel);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>before</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click',function(){
var pel="<p>全面深化改革</p>";
$('div').before(pel);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>appendTo</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click', function () {
$("<p>全面深化改革</p>").appendTo("div");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>prependTo</title>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js">
</script>
</head>
<body>
<div>
<ul id="ul">
<li>hgfd</li>
<li>gffd</li>
<li>hgfe</li>
<li>hgef</li>
</ul>
</div>
<button>添加元素</button>
<script>
$('button').on('click', function () {
$("<p>全面深化改革</p>").prependTo("div");
});
</script>
</body>
</html>