DOM基本操作

1、添加新的节点

  var li = document.createElement('li');
  var span = document.createElement('span');
  var btn_1 = document.createElement('button');
var para = document.createElement('p');  //添加一个新元素
para.textContent = "we created a new paragraphy";

只能是document.createElement（‘‘）；
文本内容element.textContent= ","

添加文本节点

    var text = document.createTextNode(' — the premier source for web development knowledge.');

2、设为子节点

sect.appendChild(para);

appendChild前面的为父节点，括号里为添加的子节点

3、删除节点

sect.removeChild(linkPara);
linkPara.parentNode.removeChild(linkPara);//没有父节点的操作方法

一定是从父节点removeChild子节点

4、改变CSS样式

para.style.color = 'white';
para.style.backgroundColor = 'black';

第一种方法类似与属性的方法。
但是代码会很多，可以采用**cssText **的方法：

obj.style.cssText = " display:block;color:White;

但这样会把原有的cssText删除掉，为了避免这个问题，可以采用累加的方法：

Element.style.cssText += ‘width:100px;height:100px;top:100px;left:100px;’

<style>
.highlight {
  color: white;
  background-color: black;
  padding: 10px;
  width: 250px;
  text-align: center;
}
</style>
para.setAttribute('class','highlight');

第二种方法更系统性，使得CSS与js完全分开，更适合大项目。