jQuery.添加元素

戈博易
2023-12-01

添加元素


建立元素经历的过程:

                                 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>

 

转载于:https://www.cnblogs.com/H97042/p/9370124.html

 类似资料: