使用 `innerHTML` 是在 JavaScript 中使用 `type` 属性创建 `button` 元素的唯一方法吗？答案

【问题标题】：Is using `innerHTML` the only way to create a `button` element in JavaScript with the `type` attribute?使用 `innerHTML` 是在 JavaScript 中使用 `type` 属性创建 `button` 元素的唯一方法吗？
【发布时间】：2011-08-30 04:32:49
【问题描述】：

我想用下面的 JavaScript 制作一个按钮...

var button = document.createElement('button');
button.type = 'button';
button.appendChild(document.createTextNode('I am button'));
document.body.appendChild(button);

效果很好，IE7/8 除外（到目前为止我都测试过）。

留言：Object doesn't support this action
线路：185
字符：9
代码：0
URI：http://example.com/widget.js

我找到了解决方法...

document.body.innerHTML = '<button type="button">I am button</button>';

即设置innerHTML，让浏览器进行解析。

jsFiddle.

有没有其他方法可以在不设置innerHTML 属性的情况下使其在 IE 中工作？

【问题讨论】：

这行得通吗：jsfiddle.net/PHrpz ？（我没有 IE）
@stewe 不，它在 IE 7 或 8 中不起作用（我使用了我的 Chrome IE 扩展程序，但它不起作用）
@Phil 我添加了错误消息。看来 IE必须预先知道 type 属性，否则它有问题。
@alex 看看 Ray 回答中的文章，你可以试试setAttribute()
@Phil 我什至没想过要检查setAttribute()。它似乎在 IE7 + 8 中工作。认为可能是时候将评论转换为答案了:)

标签： javascript button

【解决方案1】：

你试过.setAttribute()吗？以下似乎适用于 IE 8（未在 7 中测试）、Chrome、FF：

<html>
<body>
<script>
var button = document.createElement('button');
button.setAttribute('type','button')
button.appendChild(document.createTextNode('I am button'));
document.body.appendChild(button);
</script>
</body>
</html>

【讨论】：

+1 不错！所以它确实有效，只是没有通过 JS 属性直接分配给属性。 button.setAttribute('type','submit') 有效吗？我们正在讨论的文章似乎说不。很有趣。

【解决方案2】：

根据您可能已经看到的this article，IE7/8 中的直接createElement DOM 调用不适用于button 元素，但它确实适用于input。

您可能对innerHTML 解决方案（以及使用带有 HTML 源代码的 jQuery，这在本质上几乎相同，恕我直言）是唯一的方法是正确的。

对于 IE7/8 中的 DOM 缺陷非常奇怪。非常有趣的发现！

【讨论】：

+1 我没有找到那篇文章（一定是用了错误的关键字）。

【解决方案3】：

使用innerHTML 将元素中的所有内容替换为您指定的内容。

jQuery .append() 在 IE7/8 中工作：（而且更容易）

$(document).ready(function() {
    $('body').append('<button type="button">I am a button</button');
});

这是一个 jsFiddle：http://jsfiddle.net/4ne48/

【讨论】：

我相信jQuery方式本质上也是使用innerHTML。
@alex .append() 和innerHTML 不一样你看到我的jsFiddle了吗？我在 IE7 和 8 中对其进行了测试，并且可以正常工作。
@Nathan：您的附加示例仍然使用innerHTML。没有其他明智的方法可以从 HTML 字符串创建 DOM 元素。