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

          

< !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>

< !--

var board=document.getElementById("board");

var e=document.creteElement("select");

e.options[0]=new option("追加项","");

var obj=board.appendChild(e);

-->

< /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浏
4000
览器的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]);
}
}