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

Question

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

我尝试在 javascript 中创建它。问题是，该按钮不可见。如果我使用textContent 或innerHtml 为其设置一些文本，则该按钮在文本中可见，但svg 不存在。如何在 javascript 中创建此按钮？这是代码：

var myButton = document.createElement("button");
myButton.setAttribute("class", "my-button");
myButton.setAttribute("id", "foo");

var mySVG = document.createElement("svg");
mySVG.setAttribute("id", "my-svg");
mySVG.setAttribute("viewBox", "0 0 12.25 15.45");

var icon1 = document.createElement("g");
icon1.setAttribute("class", "g-element1");
icon1.setAttribute("id", "g1");

var iconPath = document.createElement("path");
iconPath.setAttribute("d", "M0,25L0,0l12.25,7.7L0,15.45z");

var icon2 = document.createElement("g");
icon2.setAttribute("class", "g-element2");
icon2.setAttribute("id", "g2");

var rect1 = document.createElement("rect");
rect1.setAttribute("x", "0");
rect1.setAttribute("y", "0");
rect1.setAttribute("width", "4.1");
rect1.setAttribute("height", "15.45");

var rect2 = document.createElement("rect");
rect2.setAttribute("x", "8.1");
rect2.setAttribute("y", "0");
rect2.setAttribute("width", "4.1");
rect2.setAttribute("height", "15.45");

icon1.appendChild(iconPath);
icon2.appendChild(rect1);
icon2.appendChild(rect2);

mySVG.appendChild(icon1);
mySVG.appendChild(icon2);

myButton.appendChild(mySVG);

document.getElementById('some-element').appendChild(myButton)

.my-button {
  font-size: 14px;
  height: 17px;
  cursor: pointer;
  margin-left: 5px;
  &:hover, &:focus {
    opacity: .8;
  }
}

<div id="some-element">
<button class="my-button" id="foo">
    <svg id="my-svg" viewBox="0 0 12.25 15.45">
        <g class="g-element1" id="g1">
            <path d="M0,25L0,0l12.25,7.7L0,15.45z"/>
        </g>
        <g class="g-element2" id="g2">
            <rect x="0" y="0" width="4.1" height="15.45"/>
            <rect x="8.1" y="0" width="4.1" height="15.45"/>
         </g>
     </svg>
 </button>
 </div>

此外，当我只在 javascript 中创建按钮并且没有为其设置文本（也没有 svg）时，该按钮不可见。

Answer 1

使用 JavaScript 创建 SVG 元素（包括 SVG 标记内的元素）时，您需要使用 document.createElementNS(namespaceURI, qualifiedName) 和适当的命名空间 URI http://www.w3.org/2000/svg。您还需要为 SVG 元素指定高度。

因为您必须为您在 SVG 标记中创建的每个元素以及 SVG 标记本身使用命名空间，您可能需要对函数进行 curry 以节省空间并防止拼写错误：

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

您的代码已修复：

var myButton = document.createElement("button");
myButton.setAttribute("class", "my-button");
myButton.setAttribute("id", "foo");

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

var mySVG = createSVGElement("svg");
mySVG.setAttribute("id", "my-svg");
mySVG.setAttribute('height', "14px");
mySVG.setAttribute("viewBox", "0 0 12.25 15.45");

var icon1 = createSVGElement("g");
icon1.setAttribute("class", "g-element1");
icon1.setAttribute("id", "g1");

var iconPath = createSVGElement("path");
iconPath.setAttribute("d", "M0,25L0,0l12.25,7.7L0,15.45z");

var icon2 = createSVGElement("g");
icon2.setAttribute("class", "g-element2");
icon2.setAttribute("id", "g2");

var rect1 = createSVGElement("rect");
rect1.setAttribute("x", "0");
rect1.setAttribute("y", "0");
rect1.setAttribute("width", "4.1");
rect1.setAttribute("height", "15.45");

var rect2 = createSVGElement("rect");
rect2.setAttribute("x", "8.1");
rect2.setAttribute("y", "0");
rect2.setAttribute("width", "4.1");
rect2.setAttribute("height", "15.45");

icon1.appendChild(iconPath);
icon2.appendChild(rect1);
icon2.appendChild(rect2);

mySVG.appendChild(icon1);
mySVG.appendChild(icon2);

myButton.appendChild(mySVG);

document.getElementById("some-element").appendChild(myButton);

.my-button {
  font-size: 14px;
  height: 17px;
  cursor: pointer;
  margin-left: 5px;
  &:hover, &:focus {
    opacity: .8;
  }
}

<div id="some-element">
<button class="my-button" id="foo">
    <svg id="my-svg" viewBox="0 0 12.25 15.45" height="14px">
        <g class="g-element1" id="g1">
            <path d="M0,25L0,0l12.25,7.7L0,15.45z"/>
        </g>
        <g class="g-element2" id="g2">
            <rect x="0" y="0" width="4.1" height="15.45"/>
            <rect x="8.1" y="0" width="4.1" height="15.45"/>
         </g>
     </svg>
 </button>
 </div>

Answer 2

SVG 似乎在按钮内折叠到零宽度和高度。您可以通过在其上设置显式宽度和高度来防止这种情况：

.my-button {
  font-size: 14px;
  height: 17px;
  cursor: pointer;
  margin-left: 5px;
  &:hover, &:focus {
    opacity: .8;
  }
}
#my-svg {width: 100%; height: 100%}

<div id="some-element">
<button class="my-button" id="foo">
    <svg id="my-svg" viewBox="0 0 12.25 15.45">
        <g class="g-element1" id="g1">
            <path d="M0,25L0,0l12.25,7.7L0,15.45z"/>
        </g>
        <g class="g-element2" id="g2">
            <rect x="0" y="0" width="4.1" height="15.45"/>
            <rect x="8.1" y="0" width="4.1" height="15.45"/>
         </g>
     </svg>
 </button>
 </div>

无论 SVG 是内联定义还是脚本生成，这同样适用。但请注意，在生成非 HTML 节点时，必须使用 .createElementNS() 并包含命名空间，如下所示：

var myButton = document.createElement("button");
myButton.setAttribute("class", "my-button");
myButton.setAttribute("id", "foo");

var svgns = "http://www.w3.org/2000/svg";

var mySVG = document.createElementNS(svgns, "svg");
mySVG.setAttribute("id", "my-svg");
mySVG.setAttribute("viewBox", "0 0 12.25 15.45");

var icon1 = document.createElementNS(svgns, "g");
icon1.setAttribute("class", "g-element1");
icon1.setAttribute("id", "g1");

var iconPath = document.createElementNS(svgns, "path");
iconPath.setAttribute("d", "M0,25L0,0l12.25,7.7L0,15.45z");

var icon2 = document.createElementNS(svgns, "g");
icon2.setAttribute("class", "g-element2");
icon2.setAttribute("id", "g2");

var rect1 = document.createElementNS(svgns, "rect");
rect1.setAttribute("x", "0");
rect1.setAttribute("y", "0");
rect1.setAttribute("width", "4.1");
rect1.setAttribute("height", "15.45");

var rect2 = document.createElementNS(svgns, "rect");
rect2.setAttribute("x", "8.1");
rect2.setAttribute("y", "0");
rect2.setAttribute("width", "4.1");
rect2.setAttribute("height", "15.45");

icon1.appendChild(iconPath);
icon2.appendChild(rect1);
icon2.appendChild(rect2);

mySVG.appendChild(icon1);
mySVG.appendChild(icon2);

document.getElementById('some-element').appendChild(mySVG)

#my-svg {
  width: 100%;
  height: 100%
}

button {height: 14px}

<button id="some-element"></div>

Answer 3

将svg 元素设置为innerHTML 到button 可能会得到结果。

document.getElementById('foo').innerHTML = '<svg id="my-svg" viewBox="0 0 12.25 15.45"><g class="g-element1" id="g1"><path d="M0,25L0,0l12.25,7.7L0,15.45z"/></g><g class="g-element2" id="g2"><rect x="0" y="0" width="4.1" height="15.45"/><rect x="8.1" y="0" width="4.1" height="15.45"/></g></svg>';

.my-button {
  font-size: 14px;
  height: 17px;
  cursor: pointer;
  margin-left: 5px;
  &:hover, &:focus {
    opacity: .8;
  }
}

svg
{
    height:100%;
  width:100%;
}

<div id="some-element">
<button class="my-button" id="foo">
 </button>
 </div>

Answer 4

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

的操作

document.body.appendChild(playButton)

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