function make(tag, attributes, children) {
var root = document.createElement(tag);
if(arguments.length == 2 && attributes.constructor != Object) {
children = attributes;
attributes = null;
}
if(attributes) {
for(var name in attributes) root.setAttribute(name, attributes[name]);
}
if(children) {
if(children.constructor == String) {
root.appendChild(document.createTextNode(children));
} else if(children.constructor == Array) {
for(var i = 0; i < children.length; i++) {
if(children[i].constructor == String) children[i] = document.createTextNode(children[i]);
root.appendChild(children[i]);
}
} else {
root.appendChild(children);
}
}
return root;
}
function maker(tag) {
return function(attributes, children) {
if (arguments.length == 1) return make(tag, attributes);
else return make(tag, attributes, children)
}
}上边这个函数这么调用就没问题：
window.onload = function() {
var p = maker("p"), b = maker("b"), u = maker("u");
var myRoot = p({align : "center"}, b(u("Good!")));
document.body.appendChild(myRoot);
};像下边这样，ie8以下的浏览器就不行了
window.onload = function() {
var table = maker("table"), tr = maker("tr"), td = maker("td");
var myRoot = table({border : 1}, [tr([td("11"), td("21"), td("31"), td("41")]),
tr([td("12"), td("22"), td("32"), td("42")]),
tr([td("13"), td("23"), td("33"), td("43")]),
tr([td("14"), td("24"), td("34"), td("44")])]);
document.body.appendChild(myRoot);
};基本上主流浏览器都测试过，这个毛病只有ie8以下出现，请高手赐教！
var root = document.createElement(tag);
if(arguments.length == 2 && attributes.constructor != Object) {
children = attributes;
attributes = null;
}
if(attributes) {
for(var name in attributes) root.setAttribute(name, attributes[name]);
}
if(children) {
if(children.constructor == String) {
root.appendChild(document.createTextNode(children));
} else if(children.constructor == Array) {
for(var i = 0; i < children.length; i++) {
if(children[i].constructor == String) children[i] = document.createTextNode(children[i]);
root.appendChild(children[i]);
}
} else {
root.appendChild(children);
}
}
return root;
}
function maker(tag) {
return function(attributes, children) {
if (arguments.length == 1) return make(tag, attributes);
else return make(tag, attributes, children)
}
}上边这个函数这么调用就没问题：
window.onload = function() {
var p = maker("p"), b = maker("b"), u = maker("u");
var myRoot = p({align : "center"}, b(u("Good!")));
document.body.appendChild(myRoot);
};像下边这样，ie8以下的浏览器就不行了
window.onload = function() {
var table = maker("table"), tr = maker("tr"), td = maker("td");
var myRoot = table({border : 1}, [tr([td("11"), td("21"), td("31"), td("41")]),
tr([td("12"), td("22"), td("32"), td("42")]),
tr([td("13"), td("23"), td("33"), td("43")]),
tr([td("14"), td("24"), td("34"), td("44")])]);
document.body.appendChild(myRoot);
};基本上主流浏览器都测试过，这个毛病只有ie8以下出现，请高手赐教！
有些属性 对对ie8一下 不起作用。。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="JavaScript">
function make(tag, attributes, children) {
var root = document.createElement(tag);
if (arguments.length == 2 && attributes.constructor != Object) {
children = attributes;
attributes = null;
}
if (attributes) {
for (var name in attributes) root.setAttribute(name, attributes[name]);
}
if (children) {
if (children.constructor == String) {
root.appendChild(document.createTextNode(children));
} else if (children.constructor == Array) {
for (var i = 0; i < children.length; i++) {
if (children[i].constructor == String) children[i] = document.createTextNode(children[i]);
root.appendChild(children[i]);
}
} else {
root.appendChild(children);
}
}
return root;
}
function maker(tag) {
return function (attributes, children) {
if (arguments.length == 1) return make(tag, attributes);
else return make(tag, attributes, children)
}
}
window.onload = function () {
alert("dsadsad");
var table = maker("table"), tr = maker("tr"), td = maker("td");
var myRoot = table({ border: 1 }, [tr([td("11"), td("21"), td("31"), td("41")]),
tr([td("12"), td("22"), td("32"), td("42")]),
tr([td("13"), td("23"), td("33"), td("43")]),
tr([td("14"), td("24"), td("34"), td("44")])]);
document.getElementById("aaa").appendChild(myRoot);
alert(document.getElementById("aaa").innerHTML);//确定里面有内容，但是IE7就是不显示 };
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="aaa" style="background-color:Red"></div>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD> <BODY>
<a id="aaa" href="a.html">hello</a>
<SCRIPT LANGUAGE="JavaScript">
<!--
var tbl = document.createElement("table");
var tby = document.createElement("tbody"); //----------
var row = document.createElement("tr");
var col = document.createElement("td");
col.innerHTML = "asdf";
row.appendChild(col);
tby.appendChild(row);//-----------
tbl.appendChild(tby);
document.body.appendChild(tbl);
//-->
</SCRIPT>
</BODY>
</HTML>
window.onload = function() {
var table = maker("table"), tbody = maker("tbody"), tr = maker("tr"), td = maker("td");
var myRoot = table({border : 1}, tbody([tr([td("11"), td("21"), td("31"), td("41")]),
tr([td("12"), td("22"), td("32"), td("42")]),
tr([td("13"), td("23"), td("33"), td("43")]),
tr([td("14"), td("24"), td("34"), td("44")])]));
document.body.appendChild(myRoot);
};
KAO，还可以这样建表格！
<!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=utf-8" />
<title>Test</title>
<script type="text/javascript">
<!-- <![CDATA[
window.onerror = function(msg, url, line) {
alert(url +
"\n____________________________________________________________" +
"\n\nLine:" + line +
"\nError:" + msg);
return true;
}; function make(tag, attributes, children) {
var root = document.createElement(tag);
if(arguments.length == 2 && attributes.constructor != Object) {
children = attributes;
attributes = null;
}
if(attributes) {
for(var name in attributes) root.setAttribute(name, attributes[name]);
}
if(children) {
if(children.constructor == String) {
root.appendChild(document.createTextNode(children));
} else if(children.constructor == Array) {
for(var i = 0; i < children.length; i++) {
if(children[i].constructor == String) children[i] = document.createTextNode(children[i]);
root.appendChild(children[i]);
}
} else {
root.appendChild(children);
}
}
return root;
}
function maker(tag) {
return function(attributes, children) {
if (arguments.length == 1) return make(tag, attributes);
else return make(tag, attributes, children)
}
} window.onload = function() {
var table = maker("table"), tbody = maker("tbody"), tr = maker("tr"), td = maker("td");
var myRoot = table({border : 1}, tbody([tr([td("11"), td("21"), td("31"), td("41")]),
tr([td("12"), td("22"), td("32"), td("42")]),
tr([td("13"), td("23"), td("33"), td("43")]),
tr([td("14"), td("24"), td("34"), td("44")])]));
document.body.appendChild(myRoot);
};
// ]]> -->
</script>
</head>
<body></body>
</html>
加了tbody果然好了，IE5.5/6/7/8、FF、Safari、Opera、Chrome、Netscape测试全过，请问楼上的高手这是为什么呢?
* Version: 1.0.
*
* This module defines a single global symbol named "Nodes".
* It is composed of several classes, and have constructors.
*
* Copyright (C) By Mr.lonely
*/ try {
var Nodes; if(!Nodes) Nodes = {};
else if(typeof Nodes != "object") throw new Error("\"Nodes\" already exists, but the type it is not an object.");
if(Nodes.getTags) throw new Error("Attribute repeat, \"Nodes.getTags\" already exist.");
if(Nodes.version) throw new Error("Attribute repeat, \"Nodes.version\" already exist."); (function() {
var _tags = {name : [], text : [], count : 0}; function _getTags(root) {
if(!root) root = document;
if(typeof root == "string") root = document.getElementById(root);
if(root.nodeType == 3) _tags.text.push(root.nodeValue);
if(root.nodeType == 1) {_tags.name.push(root.nodeName); _tags.count++;}
var children = root.childNodes;
for(var i = 0; i < children.length; i++) _getTags(children[i]);
}
_getTags.prototype.toString = function () {return _tags.name.join(" ")};
_getTags.prototype.valueOf = function () {return _tags.count};
_getTags.prototype.text = function () {return _tags.text.join(" ")}; Nodes.getTags = _getTags;
Nodes.version = function() {return "1.0"};
})()
} catch(e) {
alert(e.message);
}
<!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=utf-8" />
<title>阿尔伯特·爱因斯坦</title>
<script type="text/javascript" src="Nodes.js"></script>
<script type="text/javascript">
<!-- <![CDATA[
window.onload = function() {
var myTags = new Nodes.getTags("myTable");
alert(myTags);
alert(myTags + 0);
alert(myTags.text());
}
// ]]> -->
</script>
<style>
div {
width:800px; height:auto; margin:10px; border:none; padding:0px;
color:#000000; font-family:Arial; font-size:14px; font-weight:normal; font-style:normal; line-height:25px;
}img {
float:left; margin-right:10px; border:solid #CCCCCC 1px; padding:5px;
}
</style>
</head><body>
<h1>阿尔伯特·爱因斯坦</h1>
<a name="Introduction"></a>
<div>
<img src="Example3/5327ce163f263828972b4317.jpg" width="160" height="200" />
<p>爱因斯坦是德裔美国物理学家（拥有瑞士国籍），思想家及哲学家，犹太人，现代物理学的开创者和奠基人，相对论——“质能关系”的提出者，“决定论量子力学诠释”的捍卫者（振动的粒子）——不掷骰子的上帝。 1999年12月26日，爱因斯坦被美国《时代周刊》评选为“世纪伟人”。</p>
</div>
<div>
<table id="myTable" width="100%" height="210" border="1" cellpadding="3" cellspacing="0" bordercolordark="#CCCCCC">
<tr>
<td width="10%" height="30" align="left" valign="middle">中文名：</td>
<td width="40%" height="30" align="right" valign="middle">阿尔伯特·爱因斯坦</td>
<td width="10%" height="30" align="left" valign="middle">职业：</td>
<td width="40%" height="30" align="right" valign="middle">物理学家，哲学家</td>
</tr>
<tr>
<td width="10%" height="30" align="left" valign="middle">外文名：</td>
<td width="40%" height="30" align="right" valign="middle">Albert Einstein</td>
<td width="10%" height="30" align="left" valign="middle">毕业院校：</td>
<td width="40%" height="30" align="right" valign="middle">苏黎世联邦理工学院</td>
</tr>
<tr>
<td width="10%" height="30" align="left" valign="middle">国籍：</td>
<td width="40%" height="30" align="right" valign="middle">美国，瑞士</td>
<td width="10%" height="30" align="left" valign="middle" rowspan="3">主要成就：</td>
<td width="40%" height="30" align="right" valign="middle" rowspan="3">提出相对论及质能方程<br />解释光电效应<br />推动量子力学的发展</td>
</tr>
<tr>
<td width="10%" height="30" align="left" valign="middle">民族：</td>
<td width="40%" height="30" align="right" valign="middle">犹太族</td>
</tr>
<tr>
<td width="10%" height="30" align="left" valign="middle">出生地：</td>
<td width="40%" height="30" align="right" valign="middle">德国乌尔姆市</td>
</tr>
<tr>
<td width="10%" height="30" align="left" valign="middle">出生日期：</td>
<td width="40%" height="30" align="right" valign="middle">1879年3月14日</td>
<td width="10%" height="30" align="left" valign="middle" rowspan="2">代表作品：</td>
<td width="40%" height="30" align="right" valign="middle" rowspan="2">《论动体的电动力学》<br />《广义相对论的基础》</td>
</tr>
<tr>
<td width="10%" height="30" align="left" valign="middle">逝世日期：</td>
<td width="40%" height="30" align="right" valign="middle">1955年4月18日</td>
</tr>
</table>
</div>
</body>
</html>谢谢楼上的高手，叫我想起了我以前的例子，上边就是我以前曾做过的一个例子，刚开始用Nodes.getTags.valueOf()方法返回标签的数量和我数出来的数量死活对不上,后来用Nodes.getTags.toSrting()方法返回了下标签列表，发现含有tbody，即使是html文档的表格中没有tbody标签，浏览器也会自动的加上。哎！没想到HTML虽然简单，但有这么多细节...以后我多注意了！