IE5、6、7均存在一个问题，便是用javascript使用document.createElement创建对象后，便无法动态赋予其name值。而对于FORM表单里的input元素里的name属性非常重要，如果name值赋予不成功，提交表单后肯定会出问题的。
一般我们的思想肯定是这样写：
JavaScript 代码复制内容到剪贴板
var input = document.createElement('input');
input.id = 'myId';
input.name = 'myName';
这种写法在FireFox等非IE浏览器以及IE8中是正确的，但IE5、6、7不正确（微软总是在不经意间给予人以打击）。按照官方说法是，必须在createElement时赋予其name，即这样写：
JavaScript 代码复制内容到剪贴板
var input = document.createElement('<INPUT name="myName"/>');
input.id = 'myId';
可是这样写了之后，IE5、6、7是成功了。FireFox等非IE浏览器便不认了，创建元素失败。于是要将它们妥协。
在http://alt-tag.com/blog/archives/2006/02/ie-dom-bugs/用一个函数（判断是否为IE）解决此问题，它是把createElement重写了一遍：
JavaScript 代码复制内容到剪贴板
function createElement(type, name) {
var element = null;
try {
// First try the IE way; if this fails then use the standard way
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) {
// Probably failed because we're not running on IE
}
if (!element) {
element = document.createElement(type);
element.name = name;
}
return element;
}
<html>
<head>
</head>
<body>
<div id='oyksoft'></div>
<input type="button" value="DOIT" onclick="docreate()"/>
<script type='text/javascript'>
function CreateInput(container){
container.innerHTML="";
var myinput=createElement("input","oyksoft_input");
myinput.id="oyksoft_id";
myinput.value="创建成功啦！";
container.appendChild(myinput);
alert(myinput.name);
}
function docreate(){
var container=document.getElementById("oyksoft");
CreateInput(container);
}
function createElement(type, name) {
var element = null;
try {
// First try the IE way; if this fails then use the standard way
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) {
// Probably failed because we’re not running on IE
}
if (!element) {
element = document.createElement(type);
element.name = name;
}
return element;
}
</script>
</body>
</html>
</body></html>
分享到：
相关推荐
在JavaScript中，获取和更改HTML元素的属性是常见的操作，特别是对于`input`标签，它的`name`属性尤其重要，因为它在表单提交时用于标识数据。本文将深入讲解如何利用JavaScript来获取和更改`input`标签的`name`属性...
然而，当你尝试为创建的`<input>`元素设置`name`属性时，可能会遇到一些兼容性问题，特别是在旧版本的Internet Explorer（如IE6和IE7）中。在这些浏览器中，直接通过`obj.name = "select"`的方式设置`name`属性可能...
每个`<input>`元素都有一个`name`属性，它定义了该输入元素的标识。如果多个`<input>`元素具有相同的`name`值，那么在提交表单时，浏览器会将这些值以数组的形式发送到服务器。 当需要将这些同名的输入值拼接成一个...
在上述例子中，无论使用原生JavaScript还是jQuery，我们都是通过获取input元素并设置其value属性来实现自动赋值的。这种方法对于动态页面尤其有用，比如从服务器获取数据后填充表单，或者根据用户的行为改变输入框的...
在实现过程中，需要注意的是不同浏览器对于CSS样式的解析存在细微差别，尤其是在处理`position`属性时。为了确保良好的兼容性，本示例代码中采用了一种根据浏览器类型动态调整CSS属性值的方法： ```javascript $...
通过设置不同的`type`属性值，我们可以创建各种类型的输入控件，以满足网页表单设计的需求。 1. **普通文本框（text）** - 描述：最常见的输入类型，用于接收用户输入的简短信息。 - 语法：`<input type="text" /...
通过这种方式，用户点击按钮时，对应的`AddElement`函数会被调用，根据传入的`type`值动态创建相应的`input`元素并添加到页面上。 总结起来，JavaScript实现动态添加表单元素的关键步骤包括： 1. 使用`document....
当设置相同的name属性时，这些input元素通常会被视为一组，比如在多选或重复输入的场景下。 创建多个同名input输入框，我们可以利用jQuery的`append()`方法动态添加HTML代码。以下是一个示例： ```javascript // ...
**注意**：当多个单选按钮的`name`属性相同时，只能选择一项；若`name`属性不同，则视为不同的单选按钮组。 ##### 8. `type="image"` - 图像按钮 图像按钮允许使用图片作为按钮。 - **type**: 设置为"image"表示这...
JavaScript获取网页表单的action属性是一种常用的操作，通常用于获取表单提交时要发送到的URL地址。在Web开发中，表单是用来收集用户输入数据并将其发送到服务器的HTML元素。action属性指定了表单提交后，服务器处理...
这里的`id`属性用于JavaScript中选中特定的元素，`name`属性以数组形式（`names[]`）设置，方便在后端处理多个姓名数据。 接下来，我们需要用JavaScript来实现动态添加功能。这里可以使用事件监听器来响应用户点击...
4. **动态创建元素时的Name属性设置**：在使用JavaScript动态创建带有Name属性的HTML元素时，不能直接使用element.name=""来添加Name属性，而必须在创建元素时使用document.createElement('<element name="myName">...
2. **DOM操作**：使用`document.createElement`创建新的input元素，`element.setAttribute`设置属性，如type（文本、密码等）、name（用于识别数据）等。然后，使用`parentElement.appendChild`将新元素添加到目标...
### JavaScript网页表单元素Input的高级用法 在Web开发中，`<input>`元素是构建用户交互界面的重要组成部分之一。通过JavaScript可以实现对`<input>`元素的高级操作，从而提升用户体验、增加表单的有效性和安全性。...
在JavaScript中，为HTML元素添加`name`属性是前端开发中的常见操作，特别是在处理表单数据或者需要在页面间传递信息时。`name`属性在HTML中扮演着至关重要的角色，因为它标识了特定元素的唯一身份，使得浏览器或...
可以通过设置`name`属性来标识输入框，在表单提交时可以引用该名称获取用户输入的数据。`size`属性定义了输入框的宽度，而`maxlength`则限制了用户可以输入的最大字符数量。`value`属性预设了输入框的初始值，`...
这需要使用`document.createElement()`方法来创建一个新的`<input>`元素，并设置其属性。例如，我们可以这样创建一个文件上传框： ```javascript // 创建一个新的input元素 var uploadInput = document....
JavaScript提供了一种灵活的方式来动态地操作HTML元素，使得我们可以根据需要添加自定义属性，这在处理复杂的交互和数据绑定时非常有用。`setAttribute`和`getAttribute`是JavaScript DOM操作中的基本工具，它们允许...