Node creation, append, delete, replace

# node Creation #

Get Parent Object
var div = document.getElementById ("div");
var p = document.getElementById ("P");

Increase the label name of the node
var a = document.createelement ("a");

To increase the properties of a node
A.href= "http://www.baidu.com";

Add text node content to nodes
var text = document.createTextNode ("Jump");
or a.innerhtml= "Jump";

A.appendchild (text);

Add Node A to the last element of the parent object
Div.appendchild (a);

# Append Node #
Div Inserts object A before the P object for the parent object
Div.insertbefore (A,P);
# Delete Node #
Div.removechild (P);
# Replace Node #
To replace P with a
Div.replacechild (A,P);
# Use node knowledge to pop up the div box Exercise #
Click on a Register button, pop up a Div, also can close, note: How to fix open multiple, must close multiple issues  
var button = document.getElementById ("button");
var div = null;
Button.onclick=function () {
if (!div) {
div = document.createelement ("div");
}else {
return 0;
}

Div.style.height = "300px";
Div.style.width = "500px";
Div.style.border = "2px solid red";
Div.style.backgroundColor = "Gray";
Div.style.position = "absolute";
Div.style.top = "150px";
Div.style.left = (parseint (window.innerwidth | | window.documentElement.clientWidth) -500)/2+ "px";
Document.body.appendChild (DIV);
var a = document.createelement ("a");
A.innerhtml= "X";
A.style.float= "Right";
a.style.padding = "5px";
A.style.cursor = "pointer";
Div.appendchild (a);
A.onclick=function () {
Document.body.removeChild (DIV);
div = null;
}
}
# Implement move Up down move function # 
var select = document.getElementById ("select");
var select2 = document.getElementById ("Select2");
var button1 = document.getElementById ("button1");
var button2 = document.getElementById ("Button2");
var button3 = document.getElementById ("Button3");
var id;
Select.onfocus = Select2.onfocus = function () {
id = this.id;
}
Button1.onclick=function () {
if (id = = "select") {
A (select);
}else if (id = = "Select2") {
A (SELECT2);
}
}
function A (obj) {
for (var i = 1;i < obj.options.length;i++) {
if (obj.options[i].selected) {
var a = obj.options[i];
Obj.removechild (a);
Obj.insertbefore (A,obj.options[i-1]);
}
}
}
Button2.onclick=function () {
if (id = = "select") {
b (select);
}else if (id = = "Select2") {
B (SELECT2);
}
}

function B (obj) {
for (var i = obj.options.length-2;i>=0; i--) {
if (obj.options[i].selected) {
var a = obj.options[i];
Obj.removechild (a);
Obj.insertbefore (a,obj.options[i+1]);
}
}
}
Button3.onclick=function () {
var arr = [];
for (var i = 0;i < select.options.length;i++) {
if (select.options[i].selected) {
Arr.push (Select.options[i]);
}
}
for (var j= 0;j<arr.length;j++) {
Select2.appendchild (Arr[j]);
}
}
---------------------------------------------------


<select name= "" style= "width:150px;height:200px" id= "select" multiple= "multiple" >
<option value= "1" >1</option>
<option value= "2" >2</option>
<option value= "3" >3</option>
<option value= "4" >4</option>
<option value= "5" >5</option>
<option value= "6" >6</option>
<option value= "7" >7</option>
</select>
<select style= "width:150px;height:200px" name= "id=" Select2 "multiple=" multiple ">
</select>
<br/>
<input id= "button1" type= "button" value= "Move Up"/>
<input id= "button2" type= "button" value= "Move Down"/>
<input id= "Button3" type= "button" value= "Move Right"/>

Node creation, append, delete, replace