排序小实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById("btn");
var oList = document.getElementById("list");
var oLi = oList.getElementsByTagName("li");
var bool = true;
oBtn.onclick = function(){
var arr = [];
for(var i = 0; i < oLi.length; i++){
arr.push( oLi[i] );
}
arr.sort(function(num1,num2){
if(bool){
return parseInt(num1.innerHTML) - parseInt(num2.innerHTML);
}else{
return parseInt(num2.innerHTML) - parseInt(num1.innerHTML);
}
});
for(var i = 0; i < arr.length; i++){
oList.appendChild(arr[i]);
}
bool = !bool;
}
}
</script>
</head>
<body>
<button id="btn">确定</button>
<ul id="list">
<li>20$:足球</li>
<li>50$:排球</li>
<li>30$:篮球</li>
<li>2$:羽毛球</li>
<li>1$:乒乓球</li>
</ul>
</body>
</html>
createTextNode()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oText = document.createTextNode("我是一个创建的文本节点");
alert(oText.nodeType);
}
</script>
</head>
<body>
</body>
</html>
insertBefore(方法)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var obj = document.createElement("li");
obj.innerHTML = "我是一个新创建的个li";
obj.style.background = "green";
var oLi1 = document.getElementById("li1");
oLi1.parentNode.insertBefore(obj,oLi1);
}
</script>
</head>
<body>
<ul id="list">
<li>这里是第1个li标签</li>
<li>这里是第2个li标签</li>
<li id="li1" style="background:red">这里是第3个li标签</li>
<li>这里是第4个li标签</li>
<li>这里是第5个li标签</li>
</ul>
</body>
</html>
自定义insertAfter()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var obj = document.createElement("li");
obj.innerHTML = "我是一个新创建的个li";
obj.style.background = "green";
var oLi1 = document.getElementById("li1");
function insertAfter(newObj,obj){
obj.parentNode.insertBefore(newObj,obj.nextSibling);
}
insertAfter(obj,oLi1);
}
</script>
</head>
<body>
<ul id="list">
<li>这里是第1个li标签</li>
<li>这里是第2个li标签</li>
<li id="li1" style="background:red">这里是第3个li标签</li>
<li>这里是第4个li标签</li>
<li>这里是第5个li标签</li>
</ul>
</body>
</html>
replaceChild()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var obj = document.createElement("li");
obj.innerHTML = "我是一个新创建的个li";
obj.style.background = "green";
var oLi1 = document.getElementById("li1");
oLi1.parentNode.replaceChild(obj,oLi1);
}
</script>
</head>
<body>
<ul id="list">
<li>这里是第1个li标签</li>
<li>这里是第2个li标签</li>
<li id="li1" style="background:red">这里是第3个li标签</li>
<li>这里是第4个li标签</li>
<li>这里是第5个li标签</li>
</ul>
</body>
</html>
cloneNode()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oLi1 = document.getElementById("li1");
var obj = oLi1.cloneNode(true);
document.getElementById("list").appendChild(obj);
}
</script>
</head>
<body>
<ul id="list">
<li>这里是第1个li标签</li>
<li>这里是第2个li标签</li>
<li id="li1" style="background:red">这里是第3个li标签</li>
<li>这里是第4个li标签</li>
<li>这里是第5个li标签</li>
</ul>
</body>
</html>
removeChild()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oLi = document.getElementById("li1");
oLi.parentNode.removeChild(oLi);
}
</script>
</head>
<body>
<ul id="list">
<li>这里是第1个li标签</li>
<li>这里是第2个li标签</li>
<li id="li1" style="background:red">这里是第3个li标签</li>
<li>这里是第4个li标签</li>
<li>这里是第5个li标签</li>
</ul>
</body>
</html>