javascript 操作DOM

1.更新标签内的内容

根据document返回的DOM对象调用属性innerHTML，innerText，textContent

var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>

2 .更新CSS

DOM节点的style属性对应所有的CSS，可以直接获取或设置。因为CSS允许font-size这样的名称，但它并非JavaScript有效的属性名，所以需要在JavaScript中改写为驼峰式命名fontSize：

// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

3，插入DOM 

appendChild，把一个子节点添加到父节点的最后一个子节点。

var
    js = document.getElementById('js'),
    list = document.getElementById('list');
list.appendChild(js);

document.createElement创建新标签 

haskell = document.createElement('p');

插入DOM的例子  setAttribute设置元素属性

var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

insertBefore 插入到指定位置parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

4.删除节点

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

children属性是一个只读属性，并且它在子节点变化时会实时更新。

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错