It has been 1485 days since the last update, the content of the article may be outdated.
  • appenChild
  • insertBefore
    parentElement.insertBefore(newElement, referenceElement);
  • createElement
  • setAttribute

试验：

html
<!Doctype>
<html>
<head>
<meta charset="utf-8"></meta>
<title>js test</title>
<script>
function change(id,is){
	var js=document.getElementById(id);
	var ls=document.getElementById(is);
    ls.appendChild(js)
}

function append(){
	var list=document.getElementById("list");
	var haskell=document.createElement('p');
	haskell.id='haskell';
	haskell.innerText='Haskell';
	list.appendChild(haskell)
}

function insert(){
	var list=document.getElementById("list");
	var py=document.getElementById("python");
	var haskell=document.createElement('p');
	haskell.id='haskell';
	haskell.innerText='Haskell';
	list.insertBefore(haskell,py)
}

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


function sortt(){
var
     i, c, j, z
     list = document.getElementById('list')
for (i = 0; i < list.children.length-1; i++) {  
    c=list.children[i];
    for (j = i+1; j <list.children.length; j++) {        
          z=list.children[j];
         if(c.innerHTML > z.innerHTML){            
            [c.innerHTML,z.innerHTML]=[z.innerHTML,c.innerHTML];         
            }
        }
    }
	
}
</script>

</head>

<body>
 <button type='button' onclick=change('js','list')>click me</button>
 <button type='button' onclick=append()>append haskell</button>
 <button type='button' onclick=insert()>insert haskell</button>
 <button type='button' onclick=stylle()>change style</button>
 <button type='button' onclick=sortt()>sort</button>
<p id="js">JavaScript</p>
<div id="list">
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="java">Java</p>	
</div>
 
</body>
</html>