document.createElement()的用法
我的图书馆
document.createElement()的用法
document.createElement()的用法&&&&&&& document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
&&&&& 下面，举例说明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中加载一个按钮，属性值为“这是测试加载的小例子”。
&&&&&&& &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”。
&&&&&&& &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() 方法在节点的子节点列表任意位置插入新的节点。
------------------------------------------------------------------------------------------------------
1.创建链接
&script language="javascript"&var o = document.//创建链接function createA(url,text){&&& var a = document.createElement("a");&&& a.href =&&& a.innerHTML =&&& a.style.color = "red";&&& o.appendChild(a);&&&&&&&&&&&& //需要body重新填充节点}&/script&
&script language="javascript"&var o = document.//创建DIVfunction createDIV(text){&&& var div = document.createElement("div");&&& div.innerHTML =&&& o.appendChild(div);}
3.创建表单项
&script language="javascript"&var o = document.//创建表单项function createInput(sType,sValue){&&& var input = document.createElement("input");&&& input.type = sT&&& input.value = sV&&& o.appendChild(input);}createInput("button","ooo");&/script&
4.创建表格&script language="javascript"&var o = document.//创建表格function createTable(w,h,r,c){&&& var table = document.createElement("table");&&& var tbody = document.createElement("tbody");&&&&&&&&&&&&&&&&&&&&&//结构body&&table&&tbody&&tr&&td&&textNode&&& table.width =&&& table.height =&&& 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 + "" +&&&&&&&&&&& //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下不能创建表格，FF下可以！
-------------------------------------------------------------------------------------------------function s() { if(img)img.removeNode(true); img=document.createElement("img");img.style.position="absolute"; img.style.visibility="hidden"; img.attachEvent("onreadystatechange",orsc); img.attachEvent("onerror",oe); document.body.insertAdjacentElement("beforeend",img); img.src=inp. }
TA的推荐TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&
喜欢该文的人也喜欢下次自动登录
现在的位置:
& 综合 & 正文
JavaScript 覆盖document.createElement 方法 解决window.close在火狐下不兼容问题）
最近项目遇到了问题，有个asp.net web只能在IE7 运行，现在xp都淘汰了，大家都用IE8-IE11,因此这个web app也需要升级 适应所有IE版本。照成IE版本不兼容的问题主要来致document.createElement方法的调用，如：
function addStyleNo(value, cannotDel) {
if (!value) {
value = '';
var tb = $('tbodyStyle');
var tr = tb.insertRow();
var td1 = tr.insertCell();
td1.style.width = '20px';
td1.style.height = '20px';
if (!cannotDel) {
var imgDel = document.createElement("&img alt = '' src='./images/delete.gif' onclick = 'delScTr(this)' style='cursor:pointer' /&");
td1.appendChild(imgDel);
var td2 = tr.insertCell();
td2.style.height = '20px';
var txt = document.createElement("&input type = 'text' class = 'ip-bx-ro' value = '" + value + "' /&");
td2.appendChild(txt);
这个系统的js太多太多，大家对这个系统的业务也不熟悉，我先前是把这个document.createElement 用jquery来代替，
var imgDel = jq("&img alt = '' src='./images/delete.gif' onclick = 'delScTr(this)' style='cursor:pointer' /&")[0];
var txt = jq("&input type = 'text' class = 'ip-bx-ro' value = '" + value + "' /&")[0];
后来发现要改的地方太多了。于是想想有没有简单的方法， 最后把矛头指向覆盖document.createElement 方法的实现。
document.createEl = document.createE
document.createElement = function (obj) {
if (obj.toString().indexOf("&") & -1) {
return jq(obj)[0];
return document.createEl(obj);
目前在ie下还没有发现什么异常情况。
熟悉前端的都知道，火狐默认状态非window.open的页面window.close是无效的
网上有很多人说，在火狐的地址栏输入:about:config然后找到dom.allow_scripts_to_close_把false改为true
看着这些人的说法，不得不说我蛋疼了
我做的是网站，我怎么去改用户的浏览器设置，我不是搞病毒的啊
难道我在网站发布一个公告“如需用火狐访问本网站，请修改浏览器器设置……”
那恐怕我会死得很快
关闭是不可能的，那就搞点折中方案。。跳转到about:blank嘛
&script type="text/javascript"&
function CloseWebPage() {
if (navigator.userAgent.indexOf("MSIE") & 0) {
if (navigator.userAgent.indexOf("MSIE 6.0") & 0) {
window.opener = window.close();
window.open('', '_top'); window.top.close();
else if (navigator.userAgent.indexOf("Firefox") & 0) {
window.location.href = 'about:blank ';
//window.history.go(-2);
window.opener =
window.open('', '_self', '');
window.close();
&&&&推荐文章:
【上篇】【下篇】(智城外包网)
第三方登录：动态创建标签 - 荏苒夕阳的博客 - CSDN博客
动态创建标签
9,动态创建标签
9-1,创建的属性方法
创建元素:createElement(&标签&);
添加元素:appendChild(&标签&);
设置属性:setAttribute(&属性名&,&属性值&);
创建文本:createTextNode(&文本内容&);
删除一个元素:removeChild(&标签&);
获取父节点:parentN
9-2,动态创建一个table演示
&script&type=&text/javascript&&
function&createTable(){
//获取table元素
var&tab=document.getElementById(&tab&);
//默认创建5行
for(var&i=1;i&=5;i++){
//创建一个tr
var&tr=document.createElement('tr');
//设置当前行的id属性值
tr.setAttribute('id','tr'+i&);
tr.setAttribute('height','50px');
//创建一个td存放姓名
var&td1=document.createElement('td');
var&pass1=document.createElement('input');
//设置input标签的类型
pass1.setAttribute('type',&'text');
pass1.setAttribute('style',&'width:100height:20');
&&&&&& &&& pass1.setAttribute('height',&'100%');
//把当前的文本节点添加到对应的td中
td1.appendChild(pass1);
//创建文本节点
var&text1=document.createTextNode(&张三&);
//把当前的文本节点添加到对应的td中
td1.appendChild(text1);
//把当前的td节点添加到对应的tr中
tr.appendChild(td1);
//创建一个td存放密码
var&td2=document.createElement('td');
//创建文本节点
var&pass=document.createElement('input'); pass.setAttribute('type',&'password');
pass.setAttribute('style',&'width:100height:20');
&&&&&& &&& pass.setAttribute('height',&'100%');
td2.appendChild(pass);
tr.appendChild(td2);
//创建下拉框
&&&&& var&td3&=&document.createElement('td'); &&&&& &&&&
&&&& &&&&var&sel&=&document.createElement('select');
&&&& &&&&sel.appendChild(getOption('程序员'));
&&&& &&&&sel.appendChild(getOption('程序猿'));
&&&& &&&&sel.appendChild(getOption('教师'));
&&&& &&&&sel.appendChild(getOption('销售'));
&&&& &&&&td3.appendChild(sel);
&&&& &&&&tr.appendChild(td3);
&&&&& //创建性别&
&&&&& var&td4&=&document.createElement('td');
&&&&& var&sex&=&document.createElement('input');
&&&&& sex.setAttribute('type',&'radio');
&&&&& var&ts&=&document.createTextNode('男'); & &&&&
&&&&& var&sex1&=&document.createElement('input');
&&&&& sex1.setAttribute('type',&'radio');
&&&&& var&ts1&=&document.createTextNode('女');
&&&&& sex.setAttribute('name','sex'+i);
&&&&& sex1.setAttribute('name',&'sex'+i);
&&&&&& td4.appendChild(sex);
&&&&&& td4.appendChild(ts);
&&&&&& td4.appendChild(sex1);
&&&&&& td4.appendChild(ts1);
&&&&&& tr.appendChild(td4);
&&&&&&&//创建一个删除按钮
&&&&&& var&td5&=&document.createElement('td');
&&&&&& var&but&=&document.createElement('input');
&&&&&& but.setAttribute('type',&'button');
&&&&&& but.setAttribute('value',&'删除');
&&&&&&//把每个删除按钮绑定一个单击事件&
&&&&&& but.setAttribute('onclick',&'deleteTr(&tr'+i+'&)'); &&&&&&&&&&& td5.appendChild(but);
&&&&&&&tr.appendChild(td5);
&&&&&&&var&td6&=&document.createElement('td');
&&&&&& var&but1&=&document.createElement('input');
&&&&&& but1.setAttribute('type',&'button');
&&&&&& but1.setAttribute('value',&'提交');
&&&&&& //把每个删除按钮绑定一个单击事件&
&&&&&& but1.setAttribute('onclick',&'onsubimt(&tr'+i+'&)');
&&&&&&&td6.appendChild(but1);
&&&&&&&tr.appendChild(td6);
&&&&&&&//把每一行添加到table中&
&&&&&&&tab.appendChild(tr);&&&
&&&&&//删除指定&的tr&
function&&deleteTr(trid){&
//获取要删除的行
&&&& &var&tr&=&document.getElementById(trid);
&&&& &//获取当前行的父节点
&&&& &var&p&=&tr.parentN
&&&& &//通过父节点删除子节点
&&&& &p.removeChild(tr);
&//创建option
&function&getOption(text){
&var&op&=&document.createElement('option');
&//创建一个文本节点
&var&t&=&document.createTextNode(text);
&op.setAttribute('value',&text);
&op.appendChild(t);
&&&body&onload=&createTable()&&
&& &div&style=&margin-left:&400margin-top:&100&&
&&& &table&id=&tab&&border=&2&&style=&margin:0&auto&&
&&& &tr&&td&姓名&/td&&td&密码&/td&&td&职业&/td&
&td&性别&/td&&td&操作&/td&&td&提交&/td&&/tr&
&&& &/table&
我的热门文章
即使是一小步也想与你分享