JavaScript dom操作一些例证
日期：2014-05-16 浏览次数：20486 次
JavaScript dom操作一些例子
dom节点操作
克隆节点
创建节点，增加节点
dom节点操作
克隆节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cloneNode demo</title>
<script type="text/javascript">
function clone()
{
var p = document.body.getElementsByTagName('p')[0];
var newNode = p.cloneNode(false);
document.getElementById('containter').appendChild(newNode);
}
function cloneWithChildNodes()
{
var p = document.body.getElementsByTagName('p')[0];
var newNode = p.cloneNode(true);
document.getElementById('containter').appendChild(newNode);
}
</script>
<style type="text/css">
p {
line-height:20px;
background-color:#ff0;
height:20px;
width:400px;
}
</style>
</head>
<body>
<h1>cloneNode demo</h1>
<div id="containter">
<p>JavaScript cloneChild function demo</p>
</div>
<input type="button" value="clone node without child nodes" onclick="clone();" />
<input type="button" value="clone node with child nodes" onclick="cloneWithChildNodes();" />
</body>
</html>创建节点，增加节点
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>create & add node demo</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
background-color:#eee;
height:100%;
}
body {
padding:15px;
font-size:11px;
width:500px;
background-color:#fff;
height:100%;
font-family:Tahoma;
border-left:20px solid #ccc;
}
ul {
list-style:none;
border-top:1px solid #999;
height:350px;
overflow-x:auto;
overflow-y:scroll;
}
span {
font-weight:bold;
font-size:12px;
}
li {
border-bottom:1px dashed #666;
line-height:20px;
}
form {
margin-top:10px;
border-top:1px solid #999;
}
label {
display:block;
line-height:20px;
font-weight:bold;
cursor:pointer;
background-color:#999;
color:#fff;
margin:3px 0;
padding-left:5px;
width:100%;
}
#txtName , #txtContent {
width:100%;
font-size:11px;
}
#btnSubmit {
display:block;
margin-top:3px;
border:1px solid #666;
padding:2px 5px;
width:100%;
}
</style>
<script type="text/javascript">
function submitMsg()
{
var name = document.getElementById('txtName').value; //取得name值
var content = document.getElementById('txtContent').value; //取得message值
var span = document.createElement('span'); //创建span节点
var nameText = document.createTextNode(name); //创建文本节点，文本值为name值
span.appendChild(nameText); //将文本节点添加到span节点中
var p = document.createElement('p'); //创建p节点
var contentText = document.createTextNode(content); //创建文本节点，文本值为message值
p.appendChild(contentText); //将文本节点添加到p节点中
var li = document.createElement('li'); //创建li节点
li.appendChild(span); //将span节点添加到li节点中
li.appendChild(p); //将p节点添加到li节点中
document.getElementById('msgList').appendChild(li); //将li节点添加到msgList节点中
}
</script>
</head>
<body>
<h1>Guest Book</h1>
<ul id="msgList">
<li>
<span>Robin Chen</span>
<p>Welcome,My friends.</p>
</li>
</ul>
<form name="fmMsg" id="fmMsg" action="?" method="post">
<h2>Message</h2>
<label for="txtName">name</label>
<input name="txtName" type="text" id
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
