使用文本创建按钮元素答案

【问题标题】：Creating button element with text使用文本创建按钮元素
【发布时间】：2015-11-28 05:00:50
【问题描述】：

On My Demo Page 我正在尝试创建一个按钮，该按钮将不可避免地用于关闭模式。我试过这段代码：

x=document.createElement('button'); x.className='superclose';

CSS 如下所示：

.superclose {position:absolute; top: 50px; left:50px; width:150px; height:50px;}

但是我无法显示按钮。我认为执行整个模态代码时一定有问题，所以我尝试在 Firebug 中启动它只是为了突然创建按钮，但也没有用。

请问大家有什么推荐的吗？

另外，如何设置按钮的文本？我试图找到相应的“属性”，但找不到按钮文本。

谢谢！

【问题讨论】：

您是否将按钮添加到 DOM 某处？仅创建它不会将其添加到树中。你必须告诉文件它应该放在哪里。
..啊哈。那么，添加一个类并通过css设置位置不起作用呢？那么我将如何将按钮添加到 DOM 中呢？
它确实有效。您正在将元素分配给变量。完成后，您需要将其附加到文档中。
CSS 仅适用于 DOM 树中的元素。见add element to the DOM with JS。如果你想使用 jQuery，我建议阅读它的教程和文档（你用 jQuery 标记了这个问题，但你使用的是普通的 DOM 界面，所以我不确定你在追求什么）。
像这样尝试jsfiddle.net/VnqMv/1，顺便说一句，演示页面中的照片不错:)

【解决方案1】：

让我们正式宣布：

您必须将元素添加到 DOM。仅创建它不会将其添加到树中。

CSS 仅适用于 DOM 树中的元素。见add element to the DOM with JS。

如果你想使用 jQuery，我建议阅读它的 tutorials 和 documentation（你用 jQuery 标记了这个问题，但你使用的是普通的 DOM 界面，所以我不确定你在追求什么）。

你可以用innerHTML设置元素的内容：

x.innerHTML = 'Some Text';

使用 jQuery，整个过程将是：

// creates the button and adds it to the body
$('<button />', {'class': 'superclose', text: 'Some Text'}).appendTo(document.body);

【讨论】：