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

绝地灬酷狼 2023-07-14 10:33 16阅读 0赞

--------------------

# 一、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][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][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][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][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][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][https_www.w3school.com.cn_jquery_manipulation_html.asp]

可能还有一些以后学到再来补充  
本文只用于个人学习和记录

[https_developer.mozilla.org_zh-CN_docs_Web_API_Node_appendChild]: https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild
[https_developer.mozilla.org_zh-CN_docs_Web_API_Element_insertAdjacentHTML]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML
[https_developer.mozilla.org_zh-CN_docs_Web_API_Element_insertAdjacentElement]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentElement
[https_developer.mozilla.org_zh-CN_docs_Web_API_Element_innerHTML]: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
[https_www.w3school.com.cn_jquery_jquery_dom_add.asp]: https://www.w3school.com.cn/jquery/jquery_dom_add.asp
[https_www.w3school.com.cn_jquery_manipulation_html.asp]: https://www.w3school.com.cn/jquery/manipulation_html.asp