<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>08-创建元素和添加元素</title>
<style>
div {
margin: 10px 0px;
}
span {
color: white;
padding: 8px
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.pink {
background-color: pink;
}
.gray {
background-color: gray;
}
</style>
</head>
<body>
<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
<span>小鲜肉</span>
</div>
</body>
<!--
创建元素和添加元素
创建元素
$(\'内容\')
添加元素
1、前追加子元素
指定元素.prepend(内容) 在指定元素内容的最前面追加内容，可以是字符串、html元素、jQuery对象
$(内容).prependTo(指定元素) 把内容追加到指定元素内部的最前面，可以是字符串、html元素、jQuery对象
2、后追加子元素
指定元素.append(内容)
$(内容).apendTo(指定元素)
3、前追加同级元素
before() 在指定元素的前面追加内容
4、后追加同级元素
after() 在指定元素的后面追加内容
注：
在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置；
如果元素本身存在（已有元素）,会将原来的元素直接剪切设置到指定位置。
-->
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 创建元素
var p = \'<p>这是一个p标签</p>\';
console.log(p);
console.log($(p));
var span = \'<span>小奶狗</span>\';
$(\'.green\').prepend(span);
var span2 = \'<span>小狼狗</span>\';
$(span2).prependTo($(\'.green\'));
var span3 = \'<span>小奶狗1</span>\';
var span4 = \'<span>小奶狗2</span>\';
$(\'.green\').append(span3);
$(span4).appendTo($(\'.green\'));
// 将已存在的内容追加到指定元素中
$(\'.green\').append($(\'.red\'));
// 同级追加
var sp1 = \'<span class="pink">女神</span>\' ;
var sp2 = \'<span class="gray">女神</span>\' ;
$(\'.blue\').before(sp1);
$(\'.blue\').after(sp2);
</script>
</html>相关文章：