<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>DOM操作---增加节点、增加节点文字、指定位置增加子节点、节点复制、删除一个子节点例子</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
function t1(){
var nodezhong = document.createTextNode("中");
var nodeli = document.createElement("li");
nodeli.appendChild(nodezhong);
// var uli = document.getElementsbyTagName('ul')[0];
var uli = document.getElementsByTagName('ul')[0];
var xi = uli.children[2];
//children[2]
uli.insertBefore(nodeli,xi);
}
function t2(){
var oldul = document.getElementsByTagName('ul')[0];
var newul = oldul.cloneNode(true);
var cart = document.getElementById('card');
card.appendChild(newul);
}
function t3(){
var uln = document.getElementsByTagName('ul')[0];
var zhong = uln.children[2];
uln.removeChild(zhong);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<ul>
<li>东</li>
<li>西</li>
<li>中</li>
<li>南</li>
<li>北</li>
</ul>
<div id="card">
</div>
<input type="button" value="插中间" οnclick="t1();" />
<input type="button" value="复制节点" οnclick="t2();" />
<input type="button" value="删除节点" οnclick="t3();" />
</body>
</html>
DOM操作---增加节点、增加节点文字、指定位置增加子节点、节点复制、删除一个子节点例子
最新推荐文章于 2024-08-15 23:54:05 发布