向表中追加行
创建表格行时,我们要把创建的 tr 追加到 tbody 元素节点中,而不能直接把它追加到 table 元素节点中,因为IE 上直接追加到 table 时不能显示出来,但所有的现在的浏览都支持把 tr 追加到 tbody中,正确的做法如下:
先定义如下一个空表
<table id="myTable">
<tbody id="myTableBody">
</tbody>
</table>
然后脚本如下实现:
var cell = document.createElement("td").appendChild(document.createTextNode("foo"));
var row = document.createElement("tr").appendChild(cell);
document.getElementById("myTableBody").appendChild(row);
其实我们可以使用HTML DOM来动态地创建表格更简洁,具体请参考《DOM&HTML DOM(二)》中的“使用HTML DOM操作Table”一节。
通过JavaScript设置元素的样式
可以通过javaScript使用元素的setAttribute方法设置元素的样式。
var spanElement = document.getElementById("mySpan");
//以下是标准做法,这种方法在当前其他浏览上都是行得通的,但IE不支持。
spanElement.setAttribute("style","font-weight:bold;color:red;");
//以下是非标准做法,但得到了广泛的支持。这种方法在IE和大多数其他浏览上都能很好地工作,只有Opera除外。
spanElement.style.cssText="font-weight:bold;color:red;";
为了让代码 在所有当前浏览器上都可移值,可以同时使用这两种方法,也就是既使用setAttribute方法,又使用元素的style对象的cssText属性。
设置元素的class属性
var element = document.getElementById("myElement");
//标准。下面的写法保证除IE外,所有浏览器可用
Element.setAttribute("class", "styleClass");
//非标准。下面写法保证IE可用,而忽略class
Element.setAttribute("className", "styleClass");
创建输入元素
创建一个下拉框(select)或文本域(textarea)直接使用一条语句
var select = document.createElement("select");
就可以了。但单行文本框、复选框、单选框、单选钮、按钮稍难一些,因为它们都有同样的元素名 input,只是 type 属性不同,所以要创建这些元素使用document.createElement方法后,不要调用元素的 setAttribute方法来设置type属性的值,并且type属性的设置一定要放在追加元素到文档中之前操作。以下为正确做法:
var button = document.createElement("input");
//单行文本框、复选框、单选框、单选钮、按钮需要此属性区别,并在追加之前设置
button.setAttribute("type", "button");
document.getElementById("formElement").appendChild(button);
向输入元素增加事件处理程序
var formElement = document.getElementById("formElement");
//除IE外,所有当前浏览器中都能工作。
formElement.setAttribute("onclick", "doFoo();");
//所有浏览器可用,设置一个匿名函数 ,并在匿名函数里再调用真真的事件处理函数
formElement.onclick = function () {
doFoo();
};
创建单选按钮
// uniqueID为IE中document对象的专用属性
if (document.uniqueID) {
//只有IE支持
var radioButton = document.createElement(" <input type='radio' name='radioButton' value='checked'>");
} else {
//除IE外,其他标准浏览器都支持
var radioButton = document.createElement("input");
radioButton.setAttribute("type", "radio");
radioButton.setAttribute("name", "radioButton");
radioButton.setAttribute("value", "checked");
}
分享到:
相关推荐
1.ajax简介 2.使用javascript和ajax发出异步请求 3.ajax中的高级请求和响应 4.利用dom进行web响应
开发跨浏览器JavaScript时要注意的问题开发跨浏览器JavaScript时要注意的问题
javascript 编写跨浏览器的javascript兼容写法 js兼容
javascript解决浏览器兼容性问题
javascript获取浏览器临时目录javascript获取浏览器临时目录javascript获取浏览器临时目录javascript获取浏览器临时目录
javascript跨浏览器的属性判断方法.docx
前端学习——javascript学习笔记(二)函数
AJAX 不需要任何浏览器插件,但需要用户允许 JavaScript 在浏览器上执行 ———————————————— 版权声明:本文为CSDN博主「鹿维恩」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本...
前端学习(六)——javascript学习笔记(四)HTML DOM.xmind
Javascript高级编程学习笔记27——BOM1window对象1.docx
一个用于修改 ajax 请求响应的 chrome 扩展,修改ajax请求数据
NULL 博文链接:https://zisefeiniao.iteye.com/blog/387035
图片浏览器——JS
前端学习(五)——Javascript学习笔记(三)对象.xmind
NULL 博文链接:https://truevoid.iteye.com/blog/686399
这是一个JavaScript获取浏览器参数的方法,
javascript判断跨浏览器网页编程。
JavaScript基础
前端学习(三)——javaScript学习笔记(一)认识、数据类型、循环判断.xmind
JavaScript 获取浏览器的显示区域大小信息.txt JavaScript 获取浏览器的显示区域大小信息.txt JavaScript 获取浏览器的显示区域大小信息.txt JavaScript 获取浏览器的显示区域大小信息.txt