在 javascript 按钮中分配 html 实体代码无效

Question

我正在尝试在 javascript 中创建一个按钮并为其分配 HTML 实体代码 ⛨。这是向下箭头的 HTML 实体代码。整个代码按原样显示在按钮中，而不是显示向下箭头。

下面是我试图实现它的方法

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript">
        var btn = document.createElement("input");
        btn.setAttribute('type','button');
        btn.setAttribute('value','&#9660;');
        document.body.appendChild(btn);
    </script>
    </body>
</html>

下面是我的代码的输出

我希望该按钮应该显示向下箭头，但由于某种原因它没有显示。

Answer 1

您应该使用 innerHTML 而不是 setAttribute:

var btn = document.createElement("input");
btn.setAttribute('type','button');
btn.innerHTML = '&#9960;';
document.body.appendChild(btn);

http://jsfiddle.net/dapx0nsy/

Answer 2

尝试将 ⛨ 替换为 \u26E8，尝试将 \u2193 替换为向下箭头。 JsFiddle, ref

<!DOCTYPE html>
<html>
    <head></head>
    <body>
    <script type="text/javascript">
        var btn = document.createElement("input");
        btn.setAttribute('type','button');
        btn.setAttribute('value','\u26E8');
        document.body.appendChild(btn);
        btn = document.createElement("input");
        btn.setAttribute('type','button');
        btn.setAttribute('value','\u2193');
        document.body.appendChild(btn);
    </script>
    </body>
</html>

Answer 3

这样试试，

<html>
    <head></head>
    <body>
    <button>&#9960;</button>
    <script type="text/javascript">
        var btn = document.createElement("input");
        btn.setAttribute('type','button');
        btn.setAttribute('value','\u26E8');
        document.body.appendChild(btn);
    </script>
    </body>
</html>

第一个按钮来自 DOM，第二个来自脚本。

在 javascript 按钮中分配 html 实体代码无效

assigning html entity code in javascript button not working

javascript

html-entities

createelement