一.概念 insertAdjacentHTML() 方法将指定的文本解析为 Element 元素,并将结果节点插入到DOM树中的指定位置.它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素.这避免了额外的序列化步骤,使其比直接使用innerHTML操作更快. 二.比较 在以前,我们习惯使用 DOM 中的 createElement 方法来创建元素,但是当元素内容比较繁杂时,就需要使用 innerHTML 来进行赋值,再在 appendChild 追加到父元素中.appendChild…

appenChild() 原文转自 JS中有很多基本DOM方法,例如createElement, parentNode等,其中,appendChild方法是相当地常用与熟知,可谓是DOM节点方法中的"无人不识君"! appendChild的作用是在指定元素节点的最后一个子节点之后添加节点.好记又好用,大家都喜欢. appendChild方法就像是直接买饺子,实际上,我们还经常会遇到买饺子皮和馅自己包的情况.放在HTML中解释就是不是append节点,而是append构成节点的HTML字…

Element.insertAdjacentHTML()方法由IE引入,并在HTML5中标准化,它将任意的HTML标记字符串插入到指定的元素“相邻”的位置. insertAdjacentHTML()有两个参数,第一个参数为位置属性,第二个参数为待插入的标记字符串.且第一个参数为具有以下值之一的字符串:“beforebegin”."afterbegin"."beforeend"."afterend",这些值插入点为: (beforebegin) &…

Element对象对应网页的HTML标签元素.每一个HTML标签元素,在DOM树上都会转化成一个Element节点对象(以下简称元素节点).元素节点的nodeType属性都是1,但是不同HTML标签生成的元素节点是不一样的.JavaScript内部使用不同的构造函数,生成不同的Element节点,比如a标签的节点对象由HTMLAnchorElement()构造函数生成,button标签的节点对象由HTMLButtonElement()构造函数生成.因此,元素节点不是一种对象,而是一组对象. 属性…

/** * insertAdjacentHTML * 支持 insertAdjacentHTML()方法的浏览器有 IE.Firefox 8+.Safari.Opera 和 Chrome */ var element = document.querySelector('#box2') //作为前一个同辈元素插入 element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>") /…

function appendHTML(container,html,position){ position =position || 'after'; var objE = document.createElement("div"), nodes=null, fragment = document.createDocumentFragment(); objE.innerHTML = html; nodes=objE.childNodes; for (var i=0, length=n…

html5新增的插入标记方法,insertAdjacentHTML() 可以接受2个参数 插入位置和要插入的 HTML 文本.第一个参数必须是下列值之一: "beforebegin",在当前元素之前插入一个紧邻的同辈元素: "afterbegin",在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素: "beforeend",在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素: "afterend&…

Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nodeType 属性都是 1 浏览器使用不同的构造函数,生成不同的元素节点,有各自构造函数的属性和方法 <a> 元素的节点对象由 HTMLAnchorElement 构造函数生成 <button> 元素的节点对象由 HTMLButtonElement 构造函数生成 元素特性的相关属性 El…

插入HTML内容与文本内容以前用的是innerHTML与innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText两个API,特地学习一下: insertAdjacentHTML和 insertAdjacentText这两个方法很灵活,可以在指定的地方插入html内容和文本内容,在大部分情况下比element.innerHTML的性能更好,比Document Fragments更好的HTML文档插入方案,因为我们知道Document Fragme…

insertAdjacentHTML:insertAdjacentHTML() 将指定的文本解析为HTML或XML,并将结果节点插入到DOM树中的指定位置.它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素.这避免了额外的序列化步骤,使其比直接innerHTML操作更快. 语法:element.insertAdjacentHTML(position, text): beforebegin 元素自身的前边 afterbegin 插入元素内部第一个子节点的前边 beforeend 插入元…