<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父子之间插入</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<div class="xiaogang">xiaogang</div>
<div class="box"></div>
<div class="box2">
<ul>
<li id="lili">晓一</li>
<li>晓二</li>
<li id="li3">晓三</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function () {
// 父子之间 末尾追加 append appendTo
var tmp = '<a href="" style="display: block">点我最后面</a>';
var tmp1 = '<a href="" style="display: block">点我点我最后面</a>';
var tmp2 = '<a href="">莫点我最后面</a>';
$('.box').append(tmp2); // 在父级元素最后面追加元素
$('.box').append(tmp1); // 在父级元素最后面追加元素
$(tmp).appendTo($('.box')); // 将元素追加到父元素最后面,这个可以链式编程，简化代码
var tmpP = document.createElement('p');
tmpP.innerText="我是一个新P标签";
$(tmpP).appendTo($('.box')).click(function () {
$(this).css('color','red').text('嘿嘿嘿！');
});
// 父子之间 插入到最前面 prepend prependTo
var tmp3 = '<a href="" style="display: block">最前面点我</a>';
var tmp4 = '<a href="" style="display: block">最前面点我点我</a>';
var tmp5 = '<a href="" style="display: block">最前面点我点我点我点我</a>';
$('.box').prepend(tmp3); // 在父级元素最前面添加元素
$('.box').prepend(tmp4); // 在父级元素最前面添加元素
$(tmp5).prependTo($('.box')).click(function () {
alert($(this).text())
}); // 将元素添加到父元素最前面,这个可以链式编程，简化代码
// 兄弟之间 末尾追加 after insertAfter
var tmpLi = document.createElement('li');
$(tmpLi).text('小一后面插入');
$('#lili').after(tmpLi); // 在li后面追加一个tmpLi
var tmpLi2 = document.createElement('li');
$(tmpLi2).text('插入到小一后面');
$(tmpLi2).insertAfter($('#lili')); // 将tmpLi2插入到li后面
// 兄弟之间 添加到前面 before insertBefore
var tmpLi3 = document.createElement('li');
$(tmpLi3).text('小三前面插入');
$('#li3').before(tmpLi3); // 在li前面插入一个tmpLi
var tmpLi4 = document.createElement('li');
$(tmpLi4).text('插入到小三前面');
$(tmpLi4).insertBefore($('#li3')); // 将tmpLi4插入到li前面 链式编程 可以加事件 加css等
// es6标准 可以像shell一样 用${变量名}取值 从而实现参数化
var tmpText = '我是一个反应号实现的变量名取值';
var tmpFyh = `<li>${tmpText}</li>`;
$(tmpFyh).insertBefore($('#li3'));
})
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM替换&删除</title>
<style>
.box2{
height:200px;
width:200px;
background: #ff6700;
}
</style>
</head>
<body>
<div class="box">
<h1>晓钢</h1>
<h2>小红</h2>
<h3>小绿</h3>
<h4>小兰</h4>
<h5 id="h5id">小黑</h5>
</div>
<div class="box2">
<p style="display: block">6666666</p>
<button id="btn">点我删除</button>
</div>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 替换
// $(selector).replaceWith(content) 将所有匹配的元素替换成指定的string、js对象、jquery对象 ;
var tmpText = '替换后的内容';
var tmpOp = document.createElement('h1');
tmpOp.innerText = '最后的战役';
tmpOp.id = 'tmpid';
$('h1').replaceWith(tmpText);
$('h2').replaceWith(`<a href="#" style="display: block">${tmpText}a标签</a>`);
$('h3').replaceWith($(tmpOp));
// (content).replaceAll($(selector)) 替换所有 将所有的h4标签替换成button标签
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
// 删除 remove() detach() empty()
// $(selector).remove() 删除节点后，事件也会删除（简言之，删除了整个标签）
// $('#btn').click(function () {
// alert("我是button的事件！");
// $(this).remove().prependTo($('p'));
// });
// $(selector).detach(); 删除节点后，事件会保留
// $('#btn').click(function () {
// alert("我是button的事件！");
// $(this).detach().prependTo($('p'));
// });
// $(selector).empty(); 清空选中元素中的所有后代节点
$('#btn').click(function () {
alert("我是button的事件！");
$('p').empty();
});
})
</script>
</body>
</html>