Javascript：如何创建没有文本内容的按钮元素

在html中，我有一个按钮元素，没有文本。它有一个子svg元素，带有一些路径和矩形。它工作得很好：

我尝试用javascript创建它。问题是，按钮不可见。如果我使用

textContent

或

innerHtml

为其设置一些文本，则按钮在文本中可见，但svg不在那里。如何在javascript中创建此按钮？代码如下：

var myButton=document.createElement（“按钮”）；
setAttribute（“类”、“我的按钮”）；
设置属性（“id”、“foo”）；
var mySVG=document.createElement（“svg”）；
setAttribute（“id”、“我的svg”）；
setAttribute（“viewBox”，“0 12.25 15.45”）；
var icon1=document.createElement（“g”）；
icon1.setAttribute（“类”、“g元素1”）；
icon1.setAttribute（“id”、“g1”）；
var iconPath=document.createElement（“路径”）；
设置属性（“d”，“M0,25L0,0l12.25,7.7L0,15.45z”）；
var icon2=document.createElement（“g”）；
icon2.setAttribute（“类”、“g元素2”）；
icon2.setAttribute（“id”、“g2”）；
var rect1=document.createElement（“rect”）；
rect1.setAttribute（“x”，“0”）；
rect1.setAttribute（“y”，“0”）；
rect1.setAttribute（“宽度”、“4.1”）；
rect1.setAttribute（“高度”、“15.45”）；
var rect2=document.createElement（“rect”）；
rect2.setAttribute（“x”，“8.1”）；
rect2.setAttribute（“y”，“0”）；
rect2.setAttribute（“宽度”、“4.1”）；
rect2.setAttribute（“高度”、“15.45”）；
icon1.附加子对象（iconPath）；
icon2.追加子对象（rect1）；
icon2.追加子项（rect2）；
mySVG.appendChild（icon1）；
mySVG.appendChild（icon2）；
myButton.appendChild（mySVG）；
document.getElementById（'some-element'）.appendChild（myButton）

.my按钮{
字体大小：14px；
高度：17px；
光标：指针；
左边距：5px；
&：悬停，&：聚焦{
不透明度：.8；
}
}

---

您的代码实际上还可以，但您需要一种将按钮添加到DOM的方法。例如，如果要将其附加到正文中，您可能需要执行以下操作

document.body.appendChild(playButton)

---

您还可以将其添加到网页上的现有元素中

SVG在按钮内的宽度和高度似乎正在塌陷为零。您可以通过在其上设置明确的宽度和高度来防止这种情况：

.my按钮{
字体大小：14px；
高度：17px；
光标：指针；
左边距：5px；
&：悬停，&：聚焦{
不透明度：.8；
}
}
#我的svg{宽度：100%；高度：100%}

---

将

svg

元素设置为

按钮的innerHTML可能会给出结果


document.getElementById（'foo'）.innerHTML=''
.my按钮{
字体大小：14px；
高度：17px；
光标：指针；
左边距：5px；
&：悬停，&：聚焦{
不透明度：.8；
}
}
svg
{
身高：100%；
宽度：100%；
}
使用JavaScript创建SVG元素（包括SVG页面内的元素）时，需要与适当的命名空间URI一起使用
http://www.w3.org/2000/svg
。您还需要为SVG元素指定一个高度

由于您必须为SVG标记中创建的每个元素以及SVG标记本身使用名称空间，因此您可能希望使用函数来节省空间并防止输入错误：

const createSVGElement = qn => document.createElementNS("http://www.w3.org/2000/svg", qn);

这是您的代码修复：


var myButton=document.createElement（“按钮”）；
setAttribute（“类”、“我的按钮”）；
设置属性（“id”、“foo”）；
const createSVGElement=qn=>document.createElements（“http://www.w3.org/2000/svg“，qn）；
var mySVG=createSVGElement（“svg”）；
setAttribute（“id”、“我的svg”）；
mySVG.setAttribute（'height'，'14px'）；
setAttribute（“viewBox”，“0 12.25 15.45”）；
var icon1=createSVGElement（“g”）；
icon1.setAttribute（“类”、“g元素1”）；
icon1.setAttribute（“id”、“g1”）；
var iconPath=createSVGElement（“路径”）；
设置属性（“d”，“M0,25L0,0l12.25,7.7L0,15.45z”）；
var icon2=createSVGElement（“g”）；
icon2.setAttribute（“类”、“g元素2”）；
icon2.setAttribute（“id”、“g2”）；
var rect1=createSVGElement（“rect”）；
rect1.setAttribute（“x”，“0”）；
rect1.setAttribute（“y”，“0”）；
rect1.setAttribute（“宽度”、“4.1”）；
rect1.setAttribute（“高度”、“15.45”）；
var rect2=createSVGElement（“rect”）；
rect2.setAttribute（“x”，“8.1”）；
rect2.setAttribute（“y”，“0”）；
rect2.setAttribute（“宽度”、“4.1”）；
rect2.setAttribute（“高度”、“15.45”）；
icon1.附加子对象（iconPath）；
icon2.追加子对象（rect1）；
icon2.追加子项（rect2）；
mySVG.appendChild（icon1）；
mySVG.appendChild（icon2）；
myButton.appendChild（mySVG）；
document.getElementById（“某些元素”）.appendChild（myButton）
.my按钮{
字体大小：14px；
高度：17px；
光标：指针；
左边距：5px；
&：悬停，&：聚焦{
不透明度：.8；
}
}

当然，我会将其添加到DOM中（我在问题中说，如果我向按钮添加了一些文本内容，则该按钮会起作用），我只是没有将其包括在示例中，对不起。更新。所以一定有办法你可以尝试添加一个空白的文本节点吗？document.createTextNode（“\u00A0”）；如中所述，您可以尝试
document.createElements（“http://www.w3.org/2000/svg“，“svg”）而不是
document.createElement（“svg”）但这只是一个想法。在运行发布的示例代码时，请参见两个按钮。它们看起来都没有任何SVG，但我不确定SVG应该显示什么。请注意，您必须在HTML中使用唯一的ID。@HenriquePauli这实际上几乎是正确的，只是我必须在svg的所有子元素及其属性上使用此构造，如。现在它起作用了。谢谢你的建议。