JavaScript study notes (12) dom_basic knowledge

Dom
createElement(), createTextNode(), appendChild(), removeChild(), replaceChild(), insertBefore(), createDocumentFragment()
//Create a new node
function CreatNode() {
var oP = document.createElement("p");
oP.innerHTML = "Hello World!";
document.body.appendChild(oP);
}

//Delete node
function RemoveNode() {
var oP = document.getElementsByTagName("p");
var len = oP.length;
if (len != 0) {
oP[len - 1].parentNode.removeChild(oP[len - 1]); //It is best to use the parentNode feature of the node to delete
}
else {
alert(" All have been deleted! ");
}
}
//Replace node
function ReplaceNode() {
var oNewP = document.createElement("p");
oNewP. innerHTML = "New --> Hello World!";
//Replace the last newly added node with oNewP
var len = document.getElementsByTagName("p").length;
var oOldLastP = document.getElementsByTagName("p")[len - 1];
oOldLastP.parentNode.replaceChild(oNewP, oOldLastP);
}
//insertBefore() method
Let new messages appear before old messages, accepting two parameters:
1. The node to be added; 2. Which node to insert before
xxx.parentNode.insertBefore(newChild, oldChild);
// The createDocumentFragment() method
Creates a document fragment
can add some of the ten new node elements created to the document fragment, and then pass this fragment as a parameter to appendChild()
xxx where the fragment is to be added. appendChild(oFragment);
In this way, xxx is only called once instead of ten times, which improves performance.