<!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>