js创建元素并添加的几种方法

---

一、js原始代码的方法和属性

---

---

1、appendChild（）和createElement（）

---

var tab=document.querySelector('#container');
var p=document.createElement('p');						//p标签
 tab.appendChild(p);    								//添加到最后面

只能创建标签，不能添加里面的内容，不能创建一个字符串类型的html标签
也可参考这个：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild

---

2、insertAdjacentHTML（）

---

var tab=document.querySelector('#container');
                var div = '<div>你好！</div>';			//字符串类型
                tab.insertAdjacentHTML('beforeend',div);	//插入元素内部的最后一个子节点之后

可以创建一个字符串类型的html标签，其中有一些参数。
‘beforebegin’：元素自身的前面。
‘afterbegin’：插入元素内部的第一个子节点之前。
‘beforeend’：插入元素内部的最后一个子节点之后。
‘afterend’：元素自身的后面。
也可参考这个：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML

---

3、insertAdjacentElement（）

---

var tab=document.querySelector('#container');
                var div = document.createElement('div');		//html标签
                tab.insertAdjacentElement('beforeend',div);		//'beforeend'：插入元素内部的最后一个子节点之后。

只能创建标签，不能添加里面的内容，不能创建一个字符串类型的html标签
‘beforebegin’：元素自身的前面。
‘afterbegin’：插入元素内部的第一个子节点之前。
‘beforeend’：插入元素内部的最后一个子节点之后。
‘afterend’：元素自身的后面。
也可参考这个：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentElement

---

4、innerHTML属性

---

var tab=document.querySelector('#container');
                tab.innerHTML='<p>你好！</p>';

可以创建一个字符串类型的html标签。
也可参考这个：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML

---

二jQuery的方法和属性

---

---

1、append（）

---

 $("#container").append("<p>你好！</p>");

可以创建一个字符串类型的html标签。
也有其他类似的方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
也可参考这个：https://www.w3school.com.cn/jquery/jquery_dom_add.asp

---

2、html（）

---

$("#container").html("<p>你好！</p>");

可以创建一个字符串类型的html标签。
也可参考这个：https://www.w3school.com.cn/jquery/manipulation_html.asp

可能还有一些以后学到再来补充