1

我试图理解使用 JavaScript 动态创建的 HTML 元素。具体来说，有人可以解释为什么如果我在 HTML 中创建一个没有 value 属性的按钮，它将出现没有文本。然后我可以向它添加一个值，文本将出现在按钮中，我还可以像这样警告该值：

var Button1 = document.getElementById("Button1");
Button1.value = "test";
alert(Button1.value);

但是，如果我动态生成按钮，然后添加它不会出现在按钮上的值，尽管我仍然可以提醒它。

var Button1 = document.createElement("button");
var Div1 = document.getElementById("Div1");
Button1.value = "test";
Div1.appendChild(Button1);
alert(Button1.value);

在第二个示例中，按钮的文本没有改变，但值仍然会发出警报。我知道我可以使用 createTextNode 并将其附加到按钮，但我试图了解通过 JavaScript 动态生成的控件与在 HTML 中创建的控件之间的区别。

感谢您阅读我的问题。

4

4 回答 4

2

在您的第二个示例中，您正在创建一个新元素并为其分配一个值，但您尚未将其添加到 DOM 中——它纯粹存在于 JavaScript 中，这就是警报起作用的原因。为了查看页面上的按钮，您需要将其附加到文档中，通常使用 appendChild()。

你说，“但是，如果我动态生成按钮，然后添加它不会出现在按钮上的值，尽管我仍然可以提醒它。” 并且“按钮的文本不会改变，但值仍然会发出警报”，这让我有点困惑，因为看起来好像您可能已经在页面上有一个按钮，您希望第二个示例的代码会更改。

您的第一个示例是教科书示例，说明如何获取 DOM 中已经存在的元素、分配（或更改）其值，然后对其发出警报。

更新：要回答您修改后的问题，您的代码正在更改按钮的值，但是如果您希望看到页面上按钮的文本发生更改，则需要更改其 innerHTML 值，例如使用Button1.innerHTML = "test";. 按钮元素不像输入按钮，其值显示为按钮的文本。按钮元素的文本来自开始标签<button>和结束</button>标签之间的文本。

例子：<button value="test">test</button>

于 2012-04-19T20:24:18.353 回答
1

在第二个代码片段中，您的 Button 对象不是 DOM 的一部分，因此浏览器不会显示它。

于 2012-04-19T20:23:18.947 回答
0

您的第二个示例实际上并未将按钮放在 HTML 页面上的任何位置；它只是作为 Javascript 中的变量存在。所以我不确定你在哪里看到按钮的文本没有改变 - 整个按钮无处可见。您在页面上看到的任何按钮都不是您刚刚使用 Javascript 创建的按钮，除非您将其添加到页面（通常通过在页面上已存在的元素上调用 appendChild()）。

于 2012-04-19T20:27:32.560 回答
0

因为 button 元素的 value 属性不会改变按钮的文本，因为你可以把你想要的一切都放在一个按钮标签中，比如图像等......：

http://jsfiddle.net/jgQGe/2/

例如，您的第一个代码片段在 Chrome 中对我不起作用，我无法使用 value 属性更改按钮的文本。

您可以使用 myButton.innerHTML 设置按钮元素的文本，但不能使用 myButton.value。

于 2012-04-19T20:34:56.617 回答