13javascript添加删除div,对象的方法

来源：互联网发布：fins超出数组编辑：程序博客网时间：2024/05/22 17:16

看例子：

<!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=gb2312" />
<title>www.phperz.com</title> php程序员站
<script language="javascript">
//删除一个元素或是div
function deldiv(divid){
var div=document.getElementById(divid);
div.parentNode.removeChild(div);
}
//添加一个div
function adddiv(divid){
var div=document.createElement("DIV");
div.id=divid;
document.body.appendChild(div);
}
</script>
<style type="text/css">
#phperz{
border:1px solid #cccccc;
height:300px;
width:300px;}
</style>
</head> www.phperz.com

<body>
<div id="phperz"></div><br />
<span style="cursor:pointer" onClick="deldiv('phperz')">删除div</span>
<br />
<br />
<span style="cursor:pointer" onClick="adddiv('phperz')">添加div</span>
</body>
</html>

1appendChild定义
将元素添加到指定的节点中
target.appendChild(newChild):newChild作为target的子节点插入最后的一子节点之后。
var newElement = Document.createElement('label');
newElement.Element.setAttribute('value', 'Username:');
var usernameText = Document.getElementById('username');
usernameText.appendChild(newElement);

2insertBefore定义
该方法有的子节点前插入一个新的子节点
target.insertBefore(newChild,existingChild)
newChild作为target的子节点插入到existingChild节点之前
existingChild为可选项参数，当为null时其效果与appendChild一样
例如：
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);

3insertAfter定义
该方法有的子节点后插入一个新的子节点，使用方法类似于inserBefore
例：
function insertAfter(newEl, targetEl)
{
var parentEl = targetEl.parentNode;

if(parentEl.lastChild == targetEl)
{
parentEl.appendChild(newEl);
}else
{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}

注意这个一个完整的实例：
<html>
<head>
<script language="javascript">
//insertBeore方法演示
function insertElement()
{
var nod=document.createElement("LI");
nod.innerText="be insert now";
document.getElementById("oUL1").insertBefore(nod, oLIYellow);
}
//appendChild方法演示
function insertElement1(){
var nod1=document.createElement("P");
nod1.innerText="be insert now";
document.getElementById("d").appendChild(nod1);
}
</script>
</HEAD>
<BODY>
<input type="button" onClick="insertElement();" value="insert"><br>
<input type="button" onClick="insertElement1();" value="insert1"><br>
<UL id="oUL1">
<LI id="oLIRed">Red</LI>
<LI id="oLIYellow">Yellow</LI>
<LI id="oLIBlue">Blue</LI>
</UL>
<div id="d" width="100" height="100">

</div>
</BODY>
</html>

3javascript的setAttribute
我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现。
setAttribute("name",value):增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
setAttribute("class", value)中class是指改变"class"这个属性，所以要带引号。
value代表对样式赋值。对于IE需要使用"className"来改变对象的class属性。
例如:
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss);

4javascript的createElement
createElement创建html元素。
语法：oElement=document.createElement("tag"),tag要创建的元素的名字。如img,select,input等，返回值是新元素的引用。
创建之后我们可以利用insertBefore或appendChild将元素显示在页面中：
例如：创建一个下拉列表
<div id="board"></div>
<script language="javascript>

</script>

创建input
<div id="board"></div>
<script language="javascript">
var board=document.getElementById("board");
var e=document.createElement("inpute");
e.type="radio";
board.appendChild(e);
e.checked=true;
</script>

创建链接
<script language="javascript">
var o = document.body;
//创建链接
function createA(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
o.appendChild(a);
}
createA("http://www.webjx.com/","网页教学网");
</script>

创建DIV
<script language="javascript">
var o = document.body;
//创建DIV
function createDIV(text)
{
var div = document.createElement("div");
div.innerHTML = text;
o.appendChild(div);
}
createDIV("网页教学网：http://www.webjx.com/");
</script>

创建表单项
<script language="javascript">
var o = document.body;
//创建表单项
function createInput(sType,sValue)
{
var input = document.createElement("input");
input.type = sType;
input.value = sValue;
o.appendChild(input);
}
createInput("button","ooo");
</script>

创建表格
<script language="javascript">
var o = document.body;
//创建表格
function createTable(w,h,r,c)
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.width = w;
table.height = h;
table.border = 1;
for(var i=1;i<=r;i++)
{
var tr = document.createElement("tr");
for(var j=1;j<=c;j++)
{
var td = document.createElement("td");
td.innerHTML = i + "" + j;
//td.appendChild(document.createTextNode(i + "" + j));
td.style.color = "#FF0000";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
o.appendChild(table);
}
createTable(270,270,9,9);
</script>
注意：一定要有tbody，否则IE下不能创建表格，FireFox下可以！

innerHTML
另外用JavaScript创建页面元素还可以使用innerHTML，所有流行的Web浏览器的DOM元素都支持称作innerHTML的属性，允许以一种非常简单的方式来为元素增加任意的内容。innerHTML是一个字符串，以HTML标记的形式表示一个节点中的内容。如：
function add(el,text){
el.innerHTML+="<div class='c1'>"+text+"</div>";
}
注意这里使用+=操作来添加属性，而不是直接赋值。

5Screen对象包含客户端屏幕相关信息
availHeight，屏幕高度（不包含任务栏）
availWidth,屏幕宽度(不包含任务栏)
height，获取屏幕的垂直分辨率
width,获取屏幕的水平分辨率

6动态创建内容时所用的W3C DOM属性和方法
属性：
childNodes，返回当前元素所有子元素的数组

firstChild，返回当前元素的第一个下级子元素

lastChild，返回当前元素的最后一个子元素

nextSibling，返回紧跟在当前元素后面的元素

nodeValue，指定表示元素值的读/写属性

parentNode，返回元素的父节点

previousSibling，返回紧邻当前元素之前的元素

方法：
document.createElement(tagName)，文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数就会生成一个div元素。

document.createTextNode(text)，文档对象的createTextNode方法会创建一个包含静态文本的节点。

<element>.appendChild(childNode)，appendChild方法将指定的节点增加到当前元素的子节点列表。例如可以增减一个option元素作为select元素的子节点。

<element>.getAttribute(name)，<element>.setAttribute(name,value)这些方法分别获得和设置元素中name属性的值。

<element>.insertBefore(newNode,targetNode)，这个方法将节点newNode作为当前元素的子节点插到targetNode)元素前面。

<element>.removeAttribute(name)，这个方法从元素中所以删除属性name

<element>.replaceChild(newNode,oldNode)，这个方法将节点oldNode替换为节点newNode

<element>.hasChildnodes()，这个方法返回一个布尔值，指示元素是否有子元素。

<element>.removeChild(childNode),这个方法从元素中删除子childNode

例如：删除body中id为livemargins_control的元素
var cl=document.body.childNodes.length;
for(var i=0;i<cl;i++){
if(document.body.childNodes[i].id=="livemargins_control"){
document.body.removeChild(document.body.childNodes[i]);
}
}

0 0