DOM add

document.createElement（）

Can be used to create an element node object , It requires a tag name as a parameter , The element node object... Will be created based on the tag name , And return the created object as the return value

eg: Create a li

var li = document.createElement（"li"）;

document.createTextNode（）

Can be used to create a text node object You need a text content as a parameter , A text node will be created based on this content , And return the new node to

eg: Create Guangzhou text node

var gzText = document.createTextNode（" Guangzhou "）;

appendChild（）

Add a new node to a parent node

eg: take gzText Set to li Child nodes of

li.appendChild（gzText）;

insertBefore（）

You can insert a new child node before the specified child node
grammar ： Parent node .insertBefore（ New node , Old node ）

eg: On the parent node city Next , stay bj Insert a before li

city.insertBefore（li ,bj）;

replaceChild（）

You can replace an existing child node with a specified child node
grammar ： Parent node .replaceChild（ New node , Old node ）

eg: Use li Replace bj

city.replaceChild（li ,bj）;

removeChild（）

Delete a child node
grammar ： Parent node .removeChild（ Child node ）

eg: Delete bj

city.removeChild（bj）;

Be careful 1： In fact, many times we don't know who the parent node is , Then you can use the following method

bj.parentNode.removeChild（bj）;

Be careful ·2： Use innerHTML It can also be done DOM Add, delete and change operations , Generally, we will use a combination of two ways

// Create a li
var li = document.createElement（"li"）;
// towards li Set text in 
li.innerHTML = " Guangzhou " ;
// take li Add to city in 
city.appendChild（li）;