JavaScript 页面元素插入方法总结（欢迎补充）

JavaScript 页面元素插入innerHTML,appendChild,insertBefore,insertAdjacentHTML总结

1.通过某一个id直接 innerHTML 或者 innertext
这种方式是最原始的html替换，也是空标签替换内容
场景 使用JavaScript开发动态网页或者是绑定数据时常用

document.getElementById('xx').innerHTML('<div>213213</div>')
document.getElementById('xx').innerText('<div>213213</div>')

2.appendChild() 方法在指定元素节点的最后一个子节点之后添加节点。

参数 类型 描述
tp Node 节点 必填

document.body.appendChild(tp)

3.把元素插入到固定得位置 insertBefore() 方法可在已有的子节点前插入一个新的子节点 必须插入的是html片段

var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);

语法
node.insertBefore(newnode,existingnode)
参数
参数	类型	描述
newnode	节点对象	必须。要插入的节点对象
existingnode	节点对象	必须。要添加新的节点前的子节点。
返回值
类型	描述
节点对象	你插入的节点

4.以字符串（文本）的形式插入到页面
插入文本形式html的字符到指定地方
insertAdjacentHTML(place,txt)
插入文本到之地地方
insertAdjacentText(place,txt)

place 插入的位置
txt 插入的文本


document.body().insertAdjacentHTML(place,txt);

place可选参数
参数（必须）	    类型	    描述
beforeBegin	strimg	插入到标签开始前
afterBegin	strimg  插入到标签开始标记之后
beforeEnd	strimg	插入到标签结束标记前
afterEnd	strimg	插入到标签结束标记后
beforeBegin	strimg	插入到标签开始前