-
创建元素和添加元素
创建元素
$(“内容”)
添加元素-
前追加子元素
指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或jquery对象。
$(内容).prependTo(指定元素); 把内容追加到指定元素内部的最前面，内容可以是字符串、html元素或jquery对象。 -
后追加子元素
指定元素.append(内容) 在指定元素内部的最后面追加内容，内容可以是字符串、html元素或jquery对象。
$(内容).appendTo(指定元素); 把内容追加到指定元素内部的最后面，内容可以是字符串、html元素或jquery对象。 -
前追加同级元素
before() 在指定元素的前面追加内容 -
后追加同级元素
after() 在指定元素的后面追加内容
注：
在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；
如果元素本身存在（已有元素），会将原来元素直接剪切设置到指定位置 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>创建元素和添加元素</title>
<style>
div {
margin: 10px 0;
}
span{
color: white;
padding: 8px
}
.rd{
background-color: red;
}
.bl{
background-color: blue;
}
.gn{
background-color: green;
}
.pk {
background-color: pink;
}
.gy{
background-color: gray;
}
</style>
</head>
<body>
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="rd">rap</span>
<span class="bl">跳</span>
<div class="gn">
<span >唱</span>
</div>
</body>
<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 创建元素
const p = "<p>这是一个p标签</p>";
console.log('元素p',p);
console.log('创建的元素',$(p));
/* 添加元素 */
// 创建元素
const span = "<span>小狗</span>";
// 得到指定元素，并在元素的内部最前面追加内容
$(".gn").prepend(span);
const span2 = "<span>狼狗</span>";
$(span2).prependTo($(".gn"));
const span3 = "<span>小狗1</span>";
const span4 = "<span>小狗2</span>";
$(".gn").append(span3);
$(span4).appendTo($(".gn"));
// 将已存在内容追加到指定元素中
$(".gn").append($(".rd"));
/* 同级追加 */
const sp1 = "<span class='pk'>大白</span>";
const sp2 = "<span class='gy'>小白</span>";
$(".bl").before(sp1);
$(".bl").after(sp2);
</script>
</html>
