本文介绍了在JavaScript中使用DOM API进行元素创建、属性设置及操作的方法，包括解决不同浏览器间的兼容性问题，如appendChild方法的使用、radio及button类型的input元素设置、select控件的增删选项等。
1.调用appendChild方法增加input对象，设置type属性的位置
2.appendChild一个radio对象，设置该对象的name属性
3.对select控件增加和删除Option
1
<html>
2 <head>
3 <title>test</title>
4
<script language="javascript">
5
function test(){
6
var tbodyElement=document.getElementById("tbody1");
7 var trElement=document.createElement("tr");
8 var idTDElement=document.createElement("td");
9
10 idTDElement.innerHTML=1;
11 var nameTDElement=document.createElement("td");
12
13 var inputElement=document.createElement("input");
14 nameTDElement.appendChild(inputElement);
15 inputElement.type="button";
16 //在IE中，这句话将会抛出异常，但在firefox能正常运行，如果type为text或者不设置type属性，也都能正常运行
17 inputElement.value="Invoke";
18 /**//*
19 修改成下面的语句就能正常运行：
20 var inputElement=document.createElement("input");
21 inputElement.type="button";
22 nameTDElement.appendChild(inputElement);
23
*/
24
25 tbodyElement.appendChild(trElement);
26 trElement.appendChild(idTDElement);
27 trElement.appendChild(nameTDElement);
28 }
29
</script>
30 </head>
31 <body>
32 <input type="button" value="insert" onclick='test()'>
33 <table cellpadding="0" cellspacing="0" border="1">
34 <tbody id='tbody1'>
35 <tr>
36 <td width="50">ID</td>
37 <td width="200">name</td>
38 </tr>
39 </tbody>
40 </table>
41 </body>
42 </html>
<html>2
<head>3
<title>test</title>4
<script language="javascript">5
function test(){6
var tbodyElement=document.getElementById("tbody1");7
var trElement=document.createElement("tr");8
var idTDElement=document.createElement("td");9
10
idTDElement.innerHTML=1;11
var nameTDElement=document.createElement("td");12
13
var inputElement=document.createElement("input");14
nameTDElement.appendChild(inputElement);15
inputElement.type="button"; 16
//在IE中，这句话将会抛出异常，但在firefox能正常运行，如果type为text或者不设置type属性，也都能正常运行17
inputElement.value="Invoke";18
/**//*19
修改成下面的语句就能正常运行：20
var inputElement=document.createElement("input");21
inputElement.type="button";22
nameTDElement.appendChild(inputElement);23
*/24
25
tbodyElement.appendChild(trElement);26
trElement.appendChild(idTDElement);27
trElement.appendChild(nameTDElement);28
}29
</script>30
</head>31
<body>32
<input type="button" value="insert" onclick='test()'>33
<table cellpadding="0" cellspacing="0" border="1">34
<tbody id='tbody1'>35
<tr>36
<td width="50">ID</td>37
<td width="200">name</td>38
</tr>39
</tbody>40
</table>41
</body>42
</html>
2.appendChild一个radio对象，设置该对象的name属性
1 var nameTDElement=document.createElement("td");
2 var radioElement=document.createElement("input");
3 radioElement.type="radio";
4 nameTDElement.appendChild(inputElement);
5 radioElement.name="testRadioName"; //这句话在firefox是起作用的，但在IE下是不起作用的
6 /**//*解决的办法是
7 var radioElement=document.createElement("<input name='testRadioName'>");
8 radioElement.type="radio";
9 nameTDElement.appendChild(inputElement);
10 */
var nameTDElement=document.createElement("td"); 2
var radioElement=document.createElement("input");3
radioElement.type="radio";4
nameTDElement.appendChild(inputElement);5
radioElement.name="testRadioName"; //这句话在firefox是起作用的，但在IE下是不起作用的6
/**//*解决的办法是7
var radioElement=document.createElement("<input name='testRadioName'>");8
radioElement.type="radio";9
nameTDElement.appendChild(inputElement);10
*/
3.对select控件增加和删除Option
1 <html>
2 <head>
3 <title>test</title>
4 <script language="javascript">
5 function deleteRow(){
6 var selectElement=document.getElementById("select1");
7 selectElement.options.remove(1); //IE:OK Firefox:Failure
8 selectElement.remove(1); //IE:OK Firefox:OK
9 }
10 function insertRow(){
11 var selectElement=document.getElementById("select1");
12 var option=new Option("eeee",5);
13 selectElement.add(option); //IE:OK Firefox:Failure
14 selectElement.options.add(option);//IE:OK Firefox:OK
15 }
16 </script>
17 </head>
18 <body>
19 <input type="button" value="Delete" onclick='deleteRow()'>
20 <input type="button" value="Insert" onclick='insertRow()'>
21 <select id="select1">
22 <option value="1">aaa</option>
23 <option value="2">bbb</option>
24 <option value="3">ccc</option>
25 <option value="4">ddd</option>
26 </select>
27 </body>
28 </html>
<html>2
<head>3
<title>test</title>4
<script language="javascript">5
function deleteRow(){6
var selectElement=document.getElementById("select1");7
selectElement.options.remove(1); //IE:OK Firefox:Failure8
selectElement.remove(1); //IE:OK Firefox:OK9
}10
function insertRow(){11
var selectElement=document.getElementById("select1");12
var option=new Option("eeee",5); 13
selectElement.add(option); //IE:OK Firefox:Failure14
selectElement.options.add(option);//IE:OK Firefox:OK15
}16
</script>17
</head>18
<body>19
<input type="button" value="Delete" onclick='deleteRow()'>20
<input type="button" value="Insert" onclick='insertRow()'>21
<select id="select1">22
<option value="1">aaa</option>23
<option value="2">bbb</option>24
<option value="3">ccc</option>25
<option value="4">ddd</option>26
</select>27
</body>28
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
