web增删节点

最新推荐文章于 2022-04-20 22:31:46 发布

S九尾妖狐S

最新推荐文章于 2022-04-20 22:31:46 发布

阅读量199

点赞数

文章标签： web

<!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>创建于删除节点</title>
</head>
<script type="text/javascript">
var all;
function addParagraph()
{
all =document.getElementById("paragraphs").childNodes;
var newElement =document.createElement("p");
var seq = all.length+1;
//创建新属性
var newAttr1 =document.createAttribute("id");
newAttr1.nodeValue="p" +seq;
newElement.setAttributeNode(newAttr1);
var txtNode =document.createTextNode("段落"+seq);
//添加节点
newElement.appendChild(txtNode);
document.getElementById("paragaraphs").appendChild(newElement);

}
function deleteParagraph()
{
all =document.getElementById("paragraphs").childNodes;
var delElement = all[all.length-1];
document.getElementById("paragraphs").removeChild(delElement);
}
</script>
<style type="text/css">
p{ text-align:center;}
</style>
<body>
<div>
<input type="button" value="添加段落" οnclick="addParagraph()" />
<input type="button" value="删除段落" οnclick="deleteParagraph()" />
</div>
<div id="paragraphs">
<p id="p1" >段落1</p>
<p id="p2">段落2</p>
</div>
</body>
</html>