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

2023-11-27 22:19| 来源: 网络整理| 查看: 265

一、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 = '你好！'; //字符串类型 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='

你好！

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

二jQuery的方法和属性 1、append（） $("#container").append("

你好！

");

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

2、html（） $("#container").html("

你好！

");

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

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

【本文地址】

公司简介

联系我们