使用DOM来创建页面元素默认选中问题

原文：/article/4589075.html

此文回复中有不少亮点，所以我连回复也一并转载过来了

在IE中使用DOM方式来动态创建页面元素的时候，我发现了一些问题。记录于此，如果您有好的意见欢迎提供，如果您也遇到此问题，希望能有助你解决。

对于动态HTML编程，IE实现了两套模型：一套是以操作innerHTML为主的狭义的DHTML，一套是以集合方式操作(appendChild)页面元素对象的DOM(Document Object Model)。DHTML方式(我本文说的DHTML都默认指的对于innerHTML进行操作的编程方式，不是广义的DHTML。)直接操作html代码片断，主要靠Web程序员使用字符串拼接来生成页面元素，这是一种高效的动态页面操作方式，不过似乎少些编程逻辑的味道，代码中往往散布着大量不完整的html代码片断。而DOM方式进行动态页面编程，在逻辑上是一种对集合和元素对象的操作，编程逻辑比较清晰，不过效率上有一些差别。具体使用什么方式来实现动态Web页面，大多数情况下是个人的喜好问题，除非在效率上必须锱铢必较。

使用DOM，最常用的方法就是document.createElement(sTag)，sTag是一个合法的html标签名字(tagName)。我们创建好一个html元素对象后，对它的属性进行赋值，然后insertBefore或appendChild到页面的DOM对象树中。这里msdn提醒了几个注意事项：

1、不能通过编程方式动态创建frame和iframe元素(IE 5.0及以下)；
2、input元素被创建后默认的类型是input type='text'；
3、需要使用其他类型的input元素，需要在把input对象放入DOM对象树之前给input.type赋予你希望的类型，否则在input insert或append进入DOM对象树后不能再修改；
4、button元素被创建后默认的类型是普通按钮，要使用其它类型按钮，需要遵循和问题3相同的注意事项；
5、不能为通过向元素对象赋值得方式，为元素对象添加NAME属性(这个在"细说HTML元素的ID和NAME属性详解"一文里也是提过的)。
6、sTag其实不只限于html标签名，任何合法的html元素语句都可以。

下面说一下我遇到的问题，当我在使用DOM方式进行动态页面创建的时候，发现不能使用普通的DOM方式为input type='checkbox'和input type='radio'赋初值。即下面的语句：

var input = document.createElement('INPUT');
input.type = 'checkbox';
input.checked = true;
document.body.appendChild(input);

input = document.createElement('INPUT');
input.type = 'radio';
input.checked = true;
document.body.appendChild(input);

不能得到我期望的效果： ，而只能得到： 。

而要得到我期望的效果，需要混合DHTML和DOM两种方式就是说我必须在sTag里就构建好的属性，使用如下代码：

var input = document.createElement('<INPUT checked>');
input.type = 'checkbox';
document.body.appendChild(input);

input = document.createElement('<INPUT checked>');
input.type = 'radio';
document.body.appendChild(input);

才能得到被赋予初值得INPUT元素： 。

0
0
0
(请您对文章做出评价)

posted on 2005-04-17 19:25 birdshome 阅读(5687) 评论(18) 编辑 收藏 网摘 所属分类: Jscript&Dhtml开发

评论

1040054

#1楼 回复 引用

交换一下顺序就行了：
var input = document.createElement('INPUT');
input.type = 'checkbox';
document.body.appendChild(input);
input.checked = true;

input = document.createElement('INPUT');
input.type = 'radio';
document.body.appendChild(input);
input.checked = true;
2005-04-17 19:43 | skywood

#2楼[楼主] 回复 引用 查看

good:) 仔细想想，由于input没有被append之前，它的类型是可变更的，而除了checkbox和radio外，其它类型的INPUT元素对象的checked属性是没有意义的@_@。IE这么处理看来也就没有错了。
2005-04-17 20:15 | birdshome

#3楼 回复 引用 查看

IFRAME每问题啊。一直都是直接创建一个的。
2005-04-17 20:44 | Lostinet

#4楼[楼主] 回复 引用 查看

@Lostinet
偶faint！没有注意，msdn说的是IE5.0

。不过现在很难找了，好像win2k默认带的5.0，而且win2k+sp4默认是啥我还不确定...
2005-04-17 20:58 | birdshome

#5楼 回复 引用

kaka,果然有帮助，上次就是遇到一个问题，在google上好一顿搜，最后在你的blog上找到了几乎是唯一的答案:)
2005-04-18 11:19 | robaggio

#6楼 回复 引用

可是为什么创建了一个text类型的input之后
想再要移动它，无论怎么设置left值都没有效果呢
2005-05-11 16:39 | dfdf

#7楼 回复 引用

@dfdf
把创建的代码贴来看一下，设置position了吗？
2005-05-11 16:47 | birdshome

#8楼 回复 引用

不錯，正是我需要，非常感謝！
2006-02-14 15:16 | aspsmile[未注册用户]

#9楼 回复 引用

这未必是一个好方法，因为firefox并不支持。
firefox 无法处理 document.createElement('<INPUT checked>');
但你的第一段代码firefox可以很好的执行，像name这样的静态属性，可以被动态写入。

要兼容ie和firefox,最好还是用dom.innerHTML = string 的方式,虽然牺牲了一些效率，且逻辑性也不好。

总之这是一个很棘手的问题

2006-04-25 09:49 | bibig[未注册用户]

#10楼 回复 引用

似乎问题依然的存在，在firfox 里面就算是创建了 checkbox 元素 似乎也 不能正常的使用。也不兼容 Safari
2007-05-10 18:23 | Joe[未注册用户]

#11楼 回复 引用

我刚才 发现

var termCell = this.thebody.insertRow(-1).insertCell(-1);
term = document.createElement("input");
term.setAttribute("TYPE","CHECKBOX");
term.setAttribute("value","checkbox");

这样是 可以的～ 但是 问题是 似乎～ 用户在点击的时候 这个 checkbox 元素 状态没改变。
2007-05-10 21:32 | Joe[未注册用户]

#12楼[楼主] 回复 引用 查看

@Joe
"checkbox 元素 状态没改变"是什么意思，是说你创建的checkbox和被disabled了的效果一样？
2007-05-11 10:09 | birdshome

#13楼 回复 引用

var termCell = this.thebody.insertRow(-1).insertCell(-1);
term = document.createElement("input");
term.setAttribute("TYPE","CHECKBOX");
term.setAttribute("value","checkbox");
-------------------------------------------
把上面的term.setAttribute("TYPE","CHECKBOX");改为
term.setAttribute("type","checkbox");就可以了
2007-06-26 10:25 | flybird[未注册用户]

#14楼 回复 引用

好
2007-09-01 10:10 | suntian[未注册用户]

#15楼 回复 引用

其实如何去创建是小问题，关键不能通过这样的方式去创建对象的 name 属性。
创建不了name的话什么setAttribute啊，appendChild 也是白搭。所以就这样做就好了：
document.createElement('<INPUT name=‘’ typ=‘’ checked >');
这样也不错
2007-10-25 19:53 | T-shirt[未注册用户]

#16楼 回复 引用

//创建一个radio
var _input=document.createElement('input');
_input.setAttribute('type', 'radio');
_input.setAttribute('name', 'myradio');
_input.setAttribute('value', 'ddddd');
_input.defaultChecked=true; //注意这里
_td.appendChild(_input);

2007-11-05 10:03 | cnscn[未注册用户]