HTML5通过javascript进行动态创建

Question

我正在尝试创建dynamic HTML5 range input来控制游戏中的音量。

我的想法是将它放在我的画布上。

代码如下所示：

    var slider = document.createElement('input');
    slider.id = "volume";
    slider.type = 'range';
    slider.min = 0;
    slider.max = 1;
    slider.value = 0.5;
    slider.step = 0.1;
    document.body.appendChild(slider);

滑块出现，但不是好方法。在chrome上，只显示光标而不是整个滑块，我无法移动它。在检查器上元素存在并且没问题。

    <input id="volume" type="range" min="0" max="1" step="0.1"> on chrome

在Firefox上，它只是没有出现。

<input id="volume" type="range"> on firefox

所以我只是想知道为什么我的滑块没有正确显示。有什么我做错了吗？

PS：我已经尝试修改节点顺序或zIndex等类似的内容。

谢谢：）

Answer 1

您的代码在chrome中正常运行。考虑这个例子：
http://jsfiddle.net/webdevel/Qmvam/

如果您在DOM准备好之前尝试动态创建元素，可能会发生这种情况。

Firefox还没有支持它。