insertAdjacentHTML的简单用法

主要是添加元素用的，当然在原生的js中已经有两个了：1. 父元素.appendChild(obj);2. 父元素.insertBefore(obj,谁前面);在这里面我想拿jquery做个对比：首先声明，整个文章页面的结构是：<input type=“button” value=“插入h3” id=“btn1“><div id=“div1“>       <h2>h2h2h2</h2></div>jquery里面添加元素的方式有： 物体的内部插入：obj.appendTo(父节点);  -> 内部的后面$(function(){    $(‘#btn1′).click(function(){        $(‘<h3>h3h3h3h</h3>‘).appendTo(‘#div1′);    });});obj.prependTo(父节点)  -> 内部的前面$(function(){    $(‘#btn1′).click(function(){        $(‘<h3>h3h3h3h</h3>‘).prependTo(‘#div1′);    });}); 物体的外部插入：obj.insertBefore(父节点); -> 外部的前面$(function(){    $(‘#btn1′).click(function(){        $(‘<h3>h3h3h3h</h3>‘).insertBefore(‘#div1′);        });});obj.insertAfter(父节点);  -> 外部的后面$(function(){    $(‘#btn1′).click(function(){        $(‘<h3>h3h3h3h</h3>‘).insertAfter(‘#div1′);    });});今天介绍的insertAdjacentHTML就是类似jquery里面的这几种功能：用法：父级.insertAdjacentHTML(插入的方式,字符串元素);1. 内部的后面添加：相当于jquery中的appendTo父级.insertAdjacentHTML(‘beforeEnd’,字符串元素);window.onload=function(){    var oBtn=document.getElementById(‘btn1‘);    var oDiv=document.getElementById(‘div1‘);    oBtn.onclick=function(){        oDiv.insertAdjacentHTML(‘beforeEnd‘,‘<h3>h3h3h3h3</h3>‘);    };};2. 内部的前面添加：相当于jquery中的prependTo父级.insertAdjacentHTML(‘afterBegin’,字符串元素);window.onload=function(){    var oBtn=document.getElementById(‘btn1‘);    var oDiv=document.getElementById(‘div1‘);    oBtn.onclick=function(){        oDiv.insertAdjacentHTML(‘afterBegin‘,‘<h3>h3h3h3h3</h3>‘);    };};3. 外部的前面添加： 相当于jquery中的insertBefore父级.insertAdjacentHTML(‘beforeBegin’,字符串元素);window.onload=function(){    var oBtn=document.getElementById(‘btn1‘);    var oDiv=document.getElementById(‘div1‘);    oBtn.onclick=function(){        oDiv.insertAdjacentHTML(‘afterEnd‘,‘<h3>h3h3h3h3</h3>‘);    };};