原生js给元素添加样式（js添加元素的方式）

一           、添加单个标签元素

1.createElement()创建元素 
 
  
 
  
 
  
 
  
 
  
 、appendChild()添加元素

var box=document.getElementsByClassName("box"); var div=document.createElement("div"); box.appendChild(div);

2.insertAdjacentElement()

var box = document.getElementsByClassName("box") var div = document.createElement("div"); box.insertAdjacentElement("beforeend", div);

beforebegin：插在元素自身的前面

afterbegin：插在元素内部最前面

 beforeend：插在元素内部最后面

afterend：插在元素自身的后面 

二










、添加多个标签元素及内容

1.insertAdjacentHTML()

var box=document.getElementsByClassName("box"); var div="<div>内容<img></div>"; box.insertAdjacentHTML("beforeed",div);

beforebegin：插在元素自身的前面

afterbegin：插在元素内部最前面

 beforeend：插在元素内部最后面

afterend：插在元素自身的后面 

2.innerHTML

var box=document.getElemntsClassName("box"); box.innerHTML="<div>内容<img></div>";

3.innerText和innerHTML区别

innerHTML可以输出标签以及内容  
  
  
  
  
  ，innerText只能输出内容不能输出标签