原文地址:http://www.cnblogs.com/penny/archive/2008/09/01/1281293.html
看完此文请再看看<<提高你的DHTML性能>>
动态创建HTML内容除了用 document.write()和document.innerHTML()以外,还可以用DOM提供的方法:
createElement()和createTextNode()
1.先来说说DOM提供的createElement()和createTextNode()。
----------------------------------------------------------------------------
createElement()方法
这个方法的作用是创建一个新的元素, document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。
它的语法是:
oElement = document.createElement(sTag)
sTag | Required. String that specifies the name of an element. |
例:
document.createElement("input")
这条语句将创建一个input元素,它相当于<input >,这时input元素中没有任何属性如:type = "text"等。
那么可以通过object.setAttribute(sAttrName, vAttrValue) 设置,如:object.setAttribute("type ", "text") 。
也可以 通过oElement .type = "text"设置。
appendChild()
这个方法的作用是将新创建的元素插入到文档节点树中,且是在节点的子节点列表末添加新的子节点。
它的语法是:
parent.appendChild(child)
例:
var para=document.createElement("p")
var testdiv=document.getElementById("test")
testdiv.appendChild(para)
这条语句是将p插入到id为test的div中
insertBefore()
这个方法的作用是在节点的直接子节点列表中的oChildNode节点前插入oNewNode 节点。如果不指定oChildNode,
则插入子节点列表的末尾。看下面的《javascript动态增加行的错误》
它的语法是:
oElement = object.insertBefore(oNewNode [, oChildNode])
createTextNode()
这个方法的作用是创建一个文本节点,createTextNode() 创建的是标签(也即元素)的内容 ,createElement() 创建的是标签。
它的语法是:
document.createTextNode(text)
例:
<td> hello </td>
createTextNode对应hello
createElement对应 <td> </td>
现在我们通过几个简单的例子将这几个方法结合起来。
举例说明document.createElement()的用法。
<div id="board"></div>
例1:
<script type="text/javascript">
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "这是测试加载的小例子";
var object = board.appendChild(e);
</script>
效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。
例2:
<script type="text/javascript">
var board = document.getElementById("board");
var e2 = document.createElement("select");
e2.options[0] = new Option("加载项1", "");
e2.options[1] = new Option("加载项2", "");
e2.size = "2";
var object = board.appendChild(e2);
</script>
效果:在标签board中加载一个下拉列表框,属性值为“加载项1”和“加载项2”。
例3:
<script type="text/javascript">
var board = document.getElementById("board");
var e3 = document.createElement("input");
e4.setAttribute("type", "text");
e4.setAttribute("name", "q");
e4.setAttribute("value", "使用setAttribute");
e4.setAttribute("onclick", "javascript:alert('This is a test!');");
var object = board.appendChild(e3);
</script>
效果:在标签board中加载一个文本框,属性值为“使用setAttribute”。 当点击这个文本框时,会弹出对话框“This is a test!”。
根据上面例子,可以看出,可以通过加载对象的属性来设置,参数是相同的。使用e.type="text" 和 e.setAttribute("type","text")效果是一致的。
下面,我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同。
比如我们要在下面这个div中插入一个子节点P时:<div id="test"><p id="x1">Node</p><p>Node</p></div>
我们可以这样写:
<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
//测试从这里开始
//appendChild方法:
oTest.appendChild(newNode);
//insertBefore方法:
oTest.insertBefore(newNode,null);
</script>
通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。
在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild);
</script>
效果:这个例子将在x1节点前面插入一个新的节点
又或:
<script type="text/javascript">
var oTest = document.getElementById("test");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
效果:这个例子将在x1节点的下一个节点前面插入一个新的节点
还可为:
<script type="text/javascript">
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。
从这几个例子中得出:
appendChild() 方法在节点的子节点列表末添加新的子节点。
insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
------------------------------------------------------------
2.document.write()和document.innerHTML
document对象的write()方法可以方便的把字符串插入到文档里。
看例子:
<script>
document.write('<div><p style="background-color:#EEE;color:#666;
border:#CCC solid 1px;height:30">你好啊,我是document.write输出的</p></div>')
</script>
但是这个方法有个很大的缺点,它无法和结构分离开来。必须在结构层通过标签才能使用
innerHTML属性
使用innerHTML属性必须通过id进行“挂钩”
<body>
<div id="test"></div>
<script>
var testdiv=document.getElementById("test");
testdiv.innerHTML='<p style="background-color:#EEE;color:#666;
border:#CCC solid 1px;height:30">你好啊,我是document.innerHTML输出的</p>'
</script>
</body>
innerHTML可以方便有快捷的插入大段的HTML内容,但是,你不能对innerHTML插入的内容进行处理。还有一点要说的是innerHTML不是W3C DOM标准的组成部分,而是一项专利技术。
------------------------------------------------
一下网搜几个例子。
1.
js 动态增加行
- function addLine()
- {
- rowIndex++;
- var objTable = document.getElementById("userTable") ;
- var inputRow = document.getElementById("rowindex") ;
- var objRow = objTable.insertRow(ind) ;
- ind++;
- inputRow.value = ind;
- var objCell;
- var _i=ind;
- var txtname = ["shi","fen","pinlv","songdian1","songdian2","quyang1","quyang2","chugang1","chugang2"];
- objCell = objRow.insertCell(0);
- objCell.innerHTML = '<input name=' + txtname[0] +' class=ViewInputBox οnfοcus="checkadd(this,' + _i + ')" type="text" size="7"/>'
-
- for(m=1;m<9;m++)
- {
- objCell = objRow.insertCell(m);
- if(m==2){
- objCell.innerHTML = '<input name=' + txtname[m] +' class=ViewInputBox type="text" size="40"/>';
- }
- else
- {objCell.innerHTML = '<input name=' + txtname[m] +' class=ViewInputBox type="text" size="7"/>';
- }
- }
- objRow.setAttribute('id','userRow'+rowIndex);
- objRow.setAttribute('align',"center");
- objRow.setAttribute('bgColor',"#ffffff");
- objRow.setAttribute('onmousedown',document.all ? eval(function(){usermouse(event,_i)}) : 'javascript:usermouse(event,_i)');
-
- }
2.
3.
动态表格生成器,动态生成表,动态增加行、列
2007年05月13日 星期日 15:02
动态表格生成器 <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> <SCRIPT ID=clientEventHandlersJS LANGUAGE=JScript> <!-- function document_oncontextmenu() { window.event.returnValue = false; return false; } //--> </SCRIPT> <SCRIPT LANGUAGE=JScript FOR=document EVENT=oncontextmenu> <!-- document_oncontextmenu() //--> </SCRIPT> </HEAD> <LINK href="style.css" rel=stylesheet type=text/css> <SCRIPT LANGUAGE=JScript> <!-- var NowW = 3; var NowH = 3; function MakeSerial(w,h) { return "" + w + "_" + h; } function MakeInputTable(MaxW,MaxH) { var Html = "<Table cellSpacing=1 cellPadding=1 border=0>"; for(var h =0;h<MaxH;h++) { Html += "<TR>"; for(var w = 0;w<MaxW;w++) { Html += "<TD>"; Html += "<INPUT type=/"text/" id=INPUT"+MakeSerial(w,h)+" name=INPUT"+MakeSerial(w,h)+" Size = 8 maxLength=32>"; Html += "</TD>"; } Html += "</TR>"; } Html += "</Table>"; return Html; } function MakeTable(MaxW,MaxH) { var Html = "<Table cellSpacing=0 cellPadding=1 border=1 borderColorDark=#FFFFFF borderColorLight=#000000 width=100% style=/"FONT-SIZE: medium; CURSOR: default; COLOR: aliceblue; BACKGROUND-COLOR: #556677/">"; for(var h =0;h<MaxH;h++) { Html += "<TR>"; for(var w = 0;w<MaxW;w++) { Html += "<TD>"; var Value = window.document.body.all("INPUT" + MakeSerial(w,h)).value; if (Value=="") Value = " "; Html += Value; Html += "</TD>"; } Html += "</TR>"; } Html += "</Table>"; return Html; } function AddW(Size) { NowW += Size; if (NowW>12) NowW = 12; if (NowW<1) NowW = 1; INPUT.innerHTML = MakeInputTable(NowW,NowH); } function AddH(Size) { NowH += Size; if (NowH>12) NowH = 12; if (NowH<1) NowH = 1; INPUT.innerHTML = MakeInputTable(NowW,NowH); } function Ok() { BASE.innerHTML = MakeTable(NowW,NowH); } //--> </SCRIPT> <BODY> <TABLE cellSpacing=1 cellPadding=1 width="100%" border=0 Height="100%"> <TR Height="1%"> <TD></TD> <TD align=middle><FONT face=黑体 size=5><STRONG>动态表格生成器</STRONG></FONT></TD> <TD></TD> </TR></TR> <TR Height="50%"> <TD></TD> <TD align=middle><DIV ID=BASE> </DIV></TD> <TD></TD></TR> <TR Height="49%"> <TD></TD> <TD align=middle><DIV ID=INPUT></DIV></TD> <TD></TD></TR> <TR Height="1%"> <TD></TD> <TD align=middle><INPUT type="button" value="增加行" OnClick="AddH(1)"><INPUT type="button" value="减少行" OnClick="AddH(-1)"> <INPUT type="button" value=" 提交 " OnClick="Ok()"> <INPUT type="button" value="增加列" OnClick="AddW(1)"><INPUT type="button" value="减少列" OnClick="AddW(-1)"></TD> <TD></TD> </TR></TR> </TABLE> </BODY> <SCRIPT LANGUAGE=JScript> <!-- INPUT.innerHTML = MakeInputTable(NowW,NowH); //--> </SCRIPT> </HTML>
http://topic.csdn.net/t/20060320/13/4626294.html
第二种方法:
<form name="form1" method="post" action=""> <input type="button" name="Submit" value="-" οnclick="deleteRow()"> <input name="num" type="text" value="3" size="4" maxlength="4"> <input type="button" name="Submit2" value="+" οnclick="insertRow()"> <br> <table id="table1" width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="87"><select name="select"></select></td> <td width="277"><input type="text" name="textfield1"></td> <td width="136"><input type="button" name="1" value="1"></td> </tr> <tr> <td><select name="select2"></select></td> <td><input type="text" name="textfield2"></td> <td><input type="button" name="2" value="2"></td> </tr> <tr> <td><select name="select3"></select></td> <td><input type="text" name="textfield3"></td> <td><input type="button" name="3" value="3"></td> </tr> </table> </form> <script language=javascript> function deleteRow() { var obj=document.getElementById("table1") var rowIndex=obj.childNodes[0].childNodes.length; if(rowIndex>3) { document.getElementById("num").value=document.getElementById("num").value-parseInt(1) obj.deleteRow(rowIndex-parseInt(1)); } } function insertRow() { var obj=document.getElementById("table1") var rowIndex=obj.childNodes[0].childNodes.length; var objTR=obj.insertRow(rowIndex); var objTD1=objTR.insertCell(); var objTD2=objTR.insertCell(); var objTD3=objTR.insertCell(); rowIndex2=parseInt(rowIndex)+parseInt(1) objTD1.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[0].innerHTML.replace(/(name=)(/")*(select)(/d)(/2)/gi,"$1$2$3"+rowIndex2+"$5") objTD2.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[1].innerHTML.replace(/(name=)(/")*(textfield)(/d)(/2)/gi,"$1$2$3"+rowIndex2+"$5") objTD3.innerHTML=obj.childNodes[0].childNodes[rowIndex-1].childNodes[2].innerHTML.replace(/(=)(/")*(/d)(/2)/gi,"$1$2"+rowIndex2+"$4") document.getElementById("num").value=parseInt(document.getElementById("num").value)+parseInt(1) } </script>
3
1,动态删除Table 里面内容技巧,不需要写太多代码,一行: tb.removeNode(true) 2,动态增加行,除了CreateElement方法,还可以这样比较短小: <table id=tb1></table> <SCRIPT> function addTable(){ var row1 = tb1.insertRow(); var cell1=row1.insertCell(); var cell2=row1.insertCell(); cell1.innerText="灰豆宝宝"; cell2.innerText="超级大笨狼" } </SCRIPT> <INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()"> 3,在DIV中动态增加Table <SCRIPT> function addTable(){ var tb1 = document.createElement("table"); tb1.border="1px"; var row1 = tb1.insertRow(); var cell1=row1.insertCell(); var cell2=row1.insertCell(); mydiv.appendChild(tb1); cell1.innerText="wanghr100"; cell2.innerText="panyuguang962" } </SCRIPT> <BODY> <div id=mydiv style="width:400;height:300;"></div> <INPUT TYPE = "button" VALUE = "AddTable" onclick = "addTable()"> 4,在DIV中删除Table,简单只要Div.innerHTML=""就可以。 以上是部分实用相对短小的代码,当然有其他各种办法实现,不过一般都比上面的长,比如组合使用DIV对象的insertAdjacentHTML 方法等,在不同需要下使用不同方法,前提是研究好浏览器模型 的各种对象的方法属性。尤其是熟悉CSS+HTML就会做的很酷。就JS语言本身来说要求不高。 以下是以Document对象为例,相关方法有: Method Description attachEvent createAttribute createComment createDocumentFragment createElement createEventObject createStyleSheet createTextNode detachEvent getElementById getElementsByName getElementsByTagName mergeAttributes recalc write writeln 以DIV对象为例相关方法有: addBehavior appendChild applyElement attachEvent clearAttributes cloneNode contains detachEvent getAdjacentText getAttribute getAttributeNode getElementsByTagName hasChildNodes insertAdjacentElement insertAdjacentHTML insertAdjacentText insertBefore mergeAttributes normalize removeAttribute removeAttributeNode removeBehavior removeChild removeExpression removeNode replaceAdjacentText replaceChild replaceNode setActive setAttribute setAttributeNode setExpression ===========================
现在进入实际的操作了.我们先动态地生成一个行 var cell = document.createElement("tr"); 接着动态生成两个列和要放入列中的值. var row1 = document.createElement("td"); var row2 = document.createElement("td"); var text1 = document.createTextNode("zidoing") var text2 = document.createTextNode("xiamen"); 这些都做完以后下面就很简单了。 把值放入列中. row1.appendChild(text1); row2.appendChild(text2); 把列放入行中 cell.appendChild(row1); cell.appendChild(row2); 最后取得tbody,把行放入就可以了。 var mainbody = document.getElementById("mainbody"); mainbody.appendChild(cell); 完整的代码如下:
<script type="text/javascript"> function addCell(){ var cell = document.createElement("tr"); var row1 = document.createElement("td"); var row2 = document.createElement("td"); var text1 = document.createTextNode("zidoing") var text2 = document.createTextNode("xiamen"); row1.appendChild(text1); row2.appendChild(text2); cell.appendChild(row1); cell.appendChild(row2); var mainbody = document.getElementById("mainbody"); mainbody.appendChild(cell); } </script>
function addEditRow(tableObject) { var templateRow = getTemplateRow(tableObject); //tableObject.all.item(templateRowID); var newRow = templateRow.cloneNode(true); tableObject.tBodies(tableObject.tBodies.length-1).insertAdjacentElement("afterBegin", newRow); newRow.style.display = "inline"; for(var i = 0; i < fieldCount + prefixCollums; i++) { if(i > (prefixCollums-1)) { newRow.cells(i).innerHTML = inputForFields[i-prefixCollums]; if(fieldInsertable != null && fieldInsertable[i-prefixCollums] == false) newRow.cells(i).all.item(fieldArray[i-prefixCollums]).disabled = true; if(keepInputForNewRow) newRow.cells(i).all.item(fieldArray[i-prefixCollums]).value = curRecord[i-prefixCollums]; } else newRow.cells(i).innerHTML = templateRow.cells(i).innerHTML; } if(newRow.id == "deleted") switchRowToDeleted(newRow, false); return newRow; }
addEditRow(tableObject)具体看《TableMN.js》
|
-------------------------------------------------
出自:
http://blog.sina.com.cn/u/49e27dfb010009gh
<html>
<head>
<script>
function Test(){
var str="";
str+="Hello,";
str+="This is a Test!<br />";
str+="I Love you;<br />";
str+="I Love you,too!";
p.innerHTML=str+"<br /><br />"+Math.random();
setTimeout('Test();',1000);
}
</script>
</head>
<body οnlοad=Test();>
<span id="p"></span>
</doby>
</html>
innerTEXT与innerHTML的区别:
![](http://www.wujianrong.com/photo/420061017224724.gif)
跨浏览器的设置innerHTML方法
2006年11月06日 星期一 09:37 A.M.
From:
http://www.ajaxwing.com/index.php?c=DOM
Author:kenxu
很多人都可能遇到过这种情况:设置 innerHTML 的时候,插入的 HTML 代码中包含脚本,但这些脚本却不生效,或者在 IE 上生效在其它浏览器上就不生效。原因很简单:不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践,归纳如下:
对于IE,首先 script 标签必须带 defer 属性,其次在插入时刻,innerHTML 的所属节点必须在 DOM 树中;对于 Firefox 和 Opera,在插入时刻,innerHTML 的所属节点不可以在 DOM 树中。
根据上面结论,给出通用的设置 innerHTML 方法:
/*
* 描述:跨浏览器的设置 innerHTML 方法
* 允许插入的 HTML 代码中包含 script 和 style
* 作者:kenxu <ken@ajaxwing.com>
* 日期:2006-03-23
* 参数:
* el: 合法的 DOM 树中的节点
* htmlCode: 合法的 HTML 代码
* 经测试的浏览器:ie5+, firefox1.5+, opera8.5+
*/
var setInnerHTML = function (el, htmlCode) {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {
htmlCode = '<div style="display:none">for IE</div>' + htmlCode;
htmlCode = htmlCode.replace(/<script([^>]*)>/gi,
'<script$1 defer="true">');
el.innerHTML = htmlCode;
el.removeChild(el.firstChild);
}
else {
var el_next = el.nextSibling;
var el_parent = el.parentNode;
el_parent.removeChild(el);
el.innerHTML = htmlCode;
if (el_next) {
el_parent.insertBefore(el, el_next)
} else {
el_parent.appendChild(el);
}
}
}
还有某些情况,我们事先不清楚要插入到 innerHTML 的 HTML 代码包含什么,如果包含 document.write 语句,那么就会破坏整个页面。对于这种情况,可以通过重新定义 document.write 来避免。代码如下:
/*
* 描述:通过重定义 document.write 函数,避免在使用 setInnerHTML 时,
* 插入的 HTML 代码中包含 document.write ,导致原页面受到破坏的情况。
*/
document.write = function() {
var body = document.getElementsByTagName('body')[0];
for (var i = 0; i < arguments.length; i++) {
argument = arguments[i];
if (typeof argument == 'string') {
var el = body.appendChild(document.createElement('div'));
setInnerHTML(el, argument)
}
}
}
在这篇文章编写之前,已经有一个比较完善的解决方法《
让插入到 innerHTML 中的 script 跑起来》。比较起来,《让》给出的方法考虑得更细致,但处理起来比较繁琐,效率不高。而这里给出的方法则更简单,并且充分利用了浏览器的特性。
最近在做AJAX,想用javascript实现DataList功能,遇到一个棘手的问题,由于要生成的HTML很长,所以我写成如下的形式:
list.innerHTML="<table><tr>";
list.innerHTML+="<td>"
......
但是这样生成的innerHTML始终不对,研究了半天,原来是innerHTML搞得鬼.innerHTML自带了语法检查功能,他会自动把不完整的HTML代码补充完整.运行如下的一个测试代码就可以发现了.
document.getElementById("AlbumList").innerHTML="<table><tr>";
alert(document.getElementById("AlbumList").innerHTML);
他会自动把我的代码里面添加了<tbody>和</tr></table>等标记.神奇!!!
那么不让他自动填写的一个办法就是用一个中间变量:
var html="<table><tr>";
html+="<td>";
......
list.innerHTML=html;
就这样就可以解决问题了.
innerHTMl和确认提示的使用
今天开发中涉及到对一个层的信息控制,就是控制一个层中显示什么信息,查找资料才知道使用innerHTML属性来控制层的值,这个innerHTML跟表单里面的value属性有点类似,能够控制层的显示值。
比如说我一个div层里本来没有值,我处罚一个事件后要显示值,那么就能够使用innerHTML属性了,其实innerHTML属性除了能控制层以外,还能控制窗口内容的所有元素,但是我没有测试过。
(1)对div标签的控制
div标签跟span标签是不一样的,div是一个层的块,span是一行,我们下面看演示就知道区别了。先来看一段控制div的代码。
<script language="javascript">
function chageDiv(number)
{
if (number == 1) {
document.getElementById("div1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("div1").innerHTML = "值为2";
}
}
</script>
DIV块测试:<div id="div1">默认值</div>
<a href="#" onClick="chageDiv(1)">改变值为1</a>
<a href="#" onClick="chageDiv(2)">改变值为2</a>
运行的时候,点击“改变值为1”那么“默认值”这个内容将会被改变为“值为1”,但是注意其中的界面,就是会发现“DIV测试:”和“默认值”是两行显示的,因为DIV是按块来显示的。
(2)对span的控制
与div类似,但是它是按照行来显示的,看下面的代码:
function chageSpan(number)
{
if (number == 1) {
document.getElementById("span1").innerHTML = "值为1";
}
if (number == 2) {
document.getElementById("span1").innerHTML = "值为2";
}
}
</script>
Span行测试:
<span id="span1">默认值</span><br>
<a href="#" onClick="chageSpan(1)">改变值为1</a>
<a href="#" onClick="chageSpan(2)">改变值为2</a>
当点击“改变值为1”的时候,“默认值”将变为“值为1”,但是“Span行测试”和“默认值”是在同一行显示的,跟DIV不一样。
另外一个值得注意的就是,不管是div还是span,后面的名字都是以为id来定义的,不是象表单一样是使用name来定义的。
(3)confirm确认提示框的制作
当我们要执行一个危险操作的时候,比如删除某个内容等,那么就应该给用户相应的提示来用户不容易犯错误。一般提示都是使用confirm()函数来处理的,给它提交一个参数作为显示的信息提示,那么访问的时候将弹出对话框,如果点击了“确定”那么将改函数返回true,点击了“取消”将放回 false,我们针对这个特点来使用两种方法来控制用户是否执行某个操作。
看代码:
<script language="javascript">
function accessNeteasy()
{
if(confirm('你真的要访问网易新闻 ?')) {
location='http://calendar.eyou.eyou';
}
}
function accessSina()
{
if (confirm('你确定要访问新浪新闻 ?')) {
return true;
} else {
return false;
}
}
</script>
访问方式一:
<a href="#" onClick="accessNeteasy()">网易新闻</a><br>
访问方式二:
<a href="http://news.sina.com.cn" onClick="return accessSina()">新浪新闻</a>
我们这里建立了两个函数,一个accessNeteay,一个accessSina,就是访问网易和新浪,我们使用不同的方法,第一种就是当点了链接以后,判断如果是true的话,那么就location到指定链接,这种方法比较不具有通用型,只能针对单个的链接。第二种方法是使用返回值的形式,当确定要访问的时候返回true,不确定的时候返回false,那么这个可以针对任何链接来做,写成一个通用的信息提示,方便页面中的调用。
以上代码都经过测试通过,可以自己再这个基础上进行扩展,写出自己需要的JavaScript代码。
------------------------------------------------------
- <html>
- <head>
- <title>动态添加html元素</title>
- <script type="text/javascript">
- <!--
- var textNumber = 1;
- function addCheckDetail(form,afterElement){
- textNumber++;
-
- var label2=document.createElement("label");
- label2.appendChild(document.createTextNode("问题所属方面:"));
- var select=document.createElement("select");
- select.setAttribute("select","select"+textNumber);
- select.setAttribute("size","1");
- select.setAttribute("id","select"+textNumber);
- var option1=document.createElement("option");
- option1.setAttribute("value","1");
- option1.appendChild(document.createTextNode("方面一"));
- var option2=document.createElement("option");
- option2.setAttribute("value","2");
- option2.appendChild(document.createTextNode("方面二"));
- label2.appendChild(select);
- select.appendChild(option1);
- select.appendChild(option2);
- form.insertBefore(label2,afterElement);
-
-
- var label1 = document.createElement("label");
-
- var textField = document.createElement("textarea");
- textField.setAttribute("name","txt"+textNumber);
- textField.setAttribute("cols",80);
- textField.setAttribute("rows",3);
- textField.setAttribute("id","txt"+textNumber);
-
- label1.appendChild(document.createTextNode("问题描述"+textNumber+":"));
-
- label1.appendChild(textField);
-
- form.insertBefore(label1,afterElement);
- }
- function removeCheckDetail(form,afterElement){
-
- if (textNumber > 1) {
-
- form.removeChild(document.getElementById("select"+textNumber).parentNode);
- form.removeChild(document.getElementById("txt"+textNumber).parentNode);
- textNumber--;
- }
- }
-
- </script>
- <style type="text/css">
- <!--
- label {
- display:block;
- margin:.25em 0em;
- }
- -->
- </style>
- </head>
- <body>
- <form id="myForm" method="get" action="./" />
<html>
<head>
<title>动态添加html元素</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addCheckDetail(form,afterElement){
textNumber++;
//创建列表标签
var label2=document.createElement("label");
label2.appendChild(document.createTextNode("问题所属方面:"));
var select=document.createElement("select");
select.setAttribute("select","select"+textNumber);
select.setAttribute("size","1");
select.setAttribute("id","select"+textNumber);
var option1=document.createElement("option");
option1.setAttribute("value","1");
option1.appendChild(document.createTextNode("方面一"));
var option2=document.createElement("option");
option2.setAttribute("value","2");
option2.appendChild(document.createTextNode("方面二"));
label2.appendChild(select);
select.appendChild(option1);
select.appendChild(option2);
form.insertBefore(label2,afterElement);
// 创建文本标签
var label1 = document.createElement("label");
// 创建文本框
var textField = document.createElement("textarea");
textField.setAttribute("name","txt"+textNumber);
textField.setAttribute("cols",80);
textField.setAttribute("rows",3);
textField.setAttribute("id","txt"+textNumber);
// 增加标签文本注释
label1.appendChild(document.createTextNode("问题描述"+textNumber+":"));
// 把textField放入标签中
label1.appendChild(textField);
// 把所有的这些增加到form中
form.insertBefore(label1,afterElement);
}
function removeCheckDetail(form,afterElement){
// 假如有文本框个数超过一个
if (textNumber > 1) {
// 删除最后一个添加的文本框
form.removeChild(document.getElementById("select"+textNumber).parentNode);
form.removeChild(document.getElementById("txt"+textNumber).parentNode);
textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
- <table><tbody>
- <label>问题所属方面:
- <select name="select" size="1" id="">
- <option value="1">问题一</option>
- <option value="2">问题二</option>
- </select>
- </label>
- <label>问题描述1:<textarea name="txt1" cols="80" rows="3"></textarea></label>
-
- <p>
- <input type="button" value="添加一个问题" οnclick="addCheckDetail(this.form,this.parentNode)" />
- <input type="button" value="删除最后一个问题" οnclick="removeCheckDetail(this.form)" />
- </p>
- <p><input type="Submit" value="保存" /></p>
<table><tbody>
<label>问题所属方面:
<select name="select" size="1" id="">
<option value="1">问题一</option>
<option value="2">问题二</option>
</select>
</label>
<label>问题描述1:<textarea name="txt1" cols="80" rows="3"></textarea></label>
<p>
<input type="button" value="添加一个问题" οnclick="addCheckDetail(this.form,this.parentNode)" />
<input type="button" value="删除最后一个问题" οnclick="removeCheckDetail(this.form)" />
</p>
<p><input type="Submit" value="保存" /></p>
- </tbody></table>
-
- </form>
- </body>
- </html>
</tbody></table>
</form>
</body>
</html>
我想用javascript动态增加行,当form中没有table标签时是可以增加的,像上面增加了table标签就出现错误了,请问各位该如何解决?
采纳的答案
由于form.insertBefore是将指定节点添加到form的直接子节点上,由于form中只有一个table,没有afterElement这个直接子节点.所以会报错.
input标签的parentNode即p标签,它的直接父结点是TBODY标签.所以只能用TBodyElement.insertBefore.进行插入.
把
- form.insertBefore(label2,afterElement);
- form.insertBefore(label1,afterElement);
form.insertBefore(label2,afterElement);
form.insertBefore(label1,afterElement);
两句改为:
- afterElement.parentNode.insertBefore(label2,afterElement);
- afterElement.parentNode.insertBefore(label1,afterElement);
afterElement.parentNode.insertBefore(label2,afterElement);
afterElement.parentNode.insertBefore(label1,afterElement);
就可以了.
其他回答
table
tbody之类的元素不能直接改变innerHTML
故使用insertBefore之类的语句会报错。
直接获取table元素操作table的row和cell即可。
----------------------------------
- <html>
- <head>
- <title>动态添加html元素</title>
- <script type="text/javascript">
- <!--
- var textNumber = 1;
- function addCheckDetail(){
- textNumber++;
-
- var x=document.getElementById('myTable');
-
- var oneRow = x.insertRow();
-
- var h1=oneRow.insertCell(0);
-
- h1.innerHTML=' <label>问题' + textNumber + '所属方面:'+
- ' <select name="select' + textNumber + '" size="1" id=""> '+
- ' <option value="1">问题一</option> '+
- ' <option value="2">问题二</option> '+
- ' </select> '+
- ' </label> '+
- ' <label>问题描述' + textNumber + ':<textarea name="txt' + textNumber + '" cols="80" rows="3"></textarea></label> '+
- ' <p> ';
-
-
- }
- function removeCheckDetail(){
-
- if (textNumber > 1) {
-
- var x=document.getElementById('myTable');
- x.deleteRow(x.rows.length - 1);
- textNumber--;
- }
- }
-
- </script>
- <style type="text/css">
- <!--
- label {
- display:block;
- margin:.25em 0em;
- }
- -->
- </style>
- </head>
- <body>
- <form id="myForm" method="get" action="./">
- <table id="mytable"><tbody>
- <tr><td>
- <label>问题所属方面:
- <select name="select" size="1" id="">
- <option value="1">问题一</option>
- <option value="2">问题二</option>
- </select>
- </label>
- <label>问题描述1:<textarea name="txt1" cols="80" rows="3"></textarea></label>
- </td></tr>
- </tbody></table>
- <p>
- <input type="button" value="添加一个问题" οnclick="addCheckDetail()" />
- <input type="button" value="删除最后一个问题" οnclick="removeCheckDetail()" />
- </p>
- <p><input type="Submit" value="保存" /></p>
-
-
-
- </form>
- </body>
- </html>