相信大家在做项目的过程中都会遇到一些动态性的创建和删除，那今天我就带你认识一些常见的动态性创建元素、清空和删除元素节点。想知道更多或者更详细的请查看w3c.
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
.left,.right { width: 300px;height: 120px;}
.left div,.right div {width: 100px;height: 90px;padding: 5px;margin: 5px;float: left;border: 1px solid #ccc;}
.left div {background:#ff0000;}
.right div { background: #4cff00;}
.aaron {color: #000000;}
</style>
<h2 name="p">动态创建元素节点</h2>
<div class="left" id="leftDiv">
<div id="aaron">点击body区域会动态创建元素节点</div>
<p class="content"><div>我是div的子标签标签</div></p>
</div>
<body>
<script>
//dom 节点创建的过程（创建节点<元素、属性、文本等>、添加节点的属性、加入到文档中）
// 创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild*/
//addEventListener() 方法用于向指定元素添加事件句柄
//querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素
//getElementsByTagName()返回拥有指定标签名的所有元素
第一、appendChild（）添加元素节点
var body = document.querySelector('body');//查找body元素
document.getElementById("leftDiv").addEventListener('click', function (){
var rightdiv = document.createElement('div');//获取id
var rightaaron = document.createElement('div');
rightdiv.setAttribute('class', 'right');//设置属性
rightaaron.className = "aaron";
rightaaron.innerHTML = "动态创建DIV元素节点1";
rightdiv.appendChild(rightaaron);//添加属性
body.appendChild(rightdiv); //绘制到页面body
});
/第三、删除元素节点
var body = document.querySelector('body');//查找body元素
document.getElementById("leftDiv").addEventListener('click', function () {
var rightdiv = document.getElementsByTagName('h2')[0];//获取id
//绘制到页面body
body.removeChild(rightdiv);
})
</script>
<script src="~/content/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<script>
jQuery节点创建与属性的处理
//创建元素节点：
常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来，通过$()函数处理，$("html结构")
$("<div></div>")
创建为本节点：
与创建元素节点类似，可以直接把文本内容一并描述
$("<div>我是文本节点</div>")
创建为属性节点：
与创建元素节点同样的方式
$("<div id='test' class='aaron'>我是文本节点</div>")
我们通过jQuery把上一面的代码改造一下，如下
一条一句就搞定了，跟写HTML结构方式是一样的
$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")*/
//.使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象，然后调用append等方法将新创建的节点添加到其他节点（元素）中：
append() - 方法用来在元素的末尾追加元素
var $body = $("body");
$("#aaron").on('click', function () {
//通过jQuery生成div元素节点
var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点2</div></div>");
// $body.append(div); //将div添加到body内
//});
prepend() - 在元素的开始添加元素
//var $body = $("body");
//$("#aaron").on('click', function () {
// //通过jQuery生成div元素节点
// var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点3</div></div>");
// $body.prepend(div); //将div添加到body内
//});
afer() - 在被选元素之后插入内容
$("#aaron").on('click', function () {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".content").after('<p style="color:blue">after,在匹配元素之后增加</p>')
})
before() - 在被选元素之前插入内容
$("#aaron").on('click', function () {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".content").before('<p style="color:red">before,在匹配元素之前增加</p>')
})
.append()和.appendTo()两种方法功能相同，主要的不同是语法——内容和目标的位置不同
$("#aaron").on('click', function () {
//.append(), 内容在方法的后面，
//参数是将要插入的内容。
$(".content").append('<div class="append">通过append方法添加的元素</div>')
})
$("#aaron").on('click', function () {
//.appendTo()刚好相反，内容在方法前面，
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
/})
.empty()和.remove()区别：
.empty()是将节点清空，清除节点的innerHTML，节点还在，而.remove()是直接删除节点。
$("#aaron").on('click', function () {
//通过empty移除了当前div元素下的所有p元素
$(".content").empty()
})
remove()- 删除节点
$("#aaron").on('click', function () {
//删除整个 class=test1的div节点
$(".content").remove()
})
