js插入元素的新方法insertAdjacentHTML

paulquei 发布于2019-08-21 17:09 / 2233人阅读

摘要：下面介绍几个新的插入的以上三个方法分别是用来向一个元素中插入文本，字符串格式的代码结构，以及插入元素这三个方法的用法基本是一致的。

下面介绍几个新的插入DOM的API：

insertAdjacentText
insertAdjacentHTML
insertAdjacentElement

以上三个方法分别是用来向一个DOM元素中插入文本，字符串格式的html代码结构，以及插入DOM元素；这三个方法的用法基本是一致的。

insertAdjacentText(position, string);
insertAdjacentHTML(position, htmlstring);
insertAdjacentElement(position, element);

其中，参数position表示的是插入的位置，字符串类型，取值可以有以下：

beforebegin
afterbegin
beforeend
afterend

可以用如下的结构来描述具体的位置：

foo

接下来看一个demo：
有如下的DOM结构：


    
        origin test , test only

执行以上代码后，DOM结构如下图所示：

insertAdjacentHTML 和 insertAdjacentElement 也是类似的。

GPU云服务器云服务器 java插入元素方法 js怎么插入tr元素 js在被选元素开头插入数据数据挖掘中的新方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89193.html

js插入元素的新方法insertAdjacentHTML

摘要：下面介绍几个新的插入的以上三个方法分别是用来向一个元素中插入文本，字符串格式的代码结构，以及插入元素这三个方法的用法基本是一致的。下面介绍几个新的插入DOM的API： insertAdjacentText insertAdjacentHTML insertAdjacentElement 以上三个方法分别是用来向一个DOM元素中插入文本，字符串格式的html代码结构，以及插入DOM元...

pinecone 2019-08-01 17:50 评论0 收藏0
原生JS中DOM节点相关API合集

摘要：返回一个个比特位的二进制值，表示参数节点和当前节点的关系返回布尔值，用于检查两个节点是否相等。生成一个对象事件方法生成一个事件对象，该对象能被方法使用注册事件注销事件触发事件其他返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称，只读 Node.nodeType //返回节点类...

junfeng777 2019-08-20 15:37 评论0 收藏0
原生JS中DOM节点相关API合集

摘要：返回一个个比特位的二进制值，表示参数节点和当前节点的关系返回布尔值，用于检查两个节点是否相等。生成一个对象事件方法生成一个事件对象，该对象能被方法使用注册事件注销事件触发事件其他返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。原生JS中DOM节点相关API合集节点属性 Node.nodeName //返回节点名称，只读 Node.nodeType //返回节点类...

BaronZhang 2019-08-01 16:38 评论0 收藏0
原生JS中DOM节点相关API合集

摘要：返回一个个比特位的二进制值，表示参数节点和当前节点的关系返回布尔值，用于检查两个节点是否相等。生成一个对象事件方法生成一个事件对象，该对象能被方法使用注册事件注销事件触发事件其他返回一个布尔值，表示当前文档之中是否有元素被激活或获得焦点。节点属性 Node.nodeName //返回节点名称，只读Node.nodeType //返回节点类型的常数值，只读Node.nodeVa...

lemon 2019-08-20 15:37 评论0 收藏0
JavaScript DOM扩展——“HTML5”的注意要点

摘要：如他返回的对象是。方法，这个方法用于确定文档是否获得了焦点。另外，需要注意的是，该属性插入元素并不会执行其中的脚本。在中，方法接收一个字符串，返回一个经过无害处理后的版本。属性同样的，在读模式下返回调用它的元素及所有子节点的标签。与类相关的扩充 getElementsByClassName()方法接收一个参数，即一个或多个类名的字符串。如： console.log(documen...

cppowboy 2019-08-19 17:14 评论0 收藏0