javascript - 添加周围/之后在纯 JavaScript

Question

我正在用纯javascript（没有jQuery）制作一个简单的输入滑块。它工作得很好，除了一个小缺陷：我需要在 html 中调用它

<div id="test0" data-options="A;B;C;D;E" class="myslider"></div>

而不是更自然

<input type="hidden" class="myslider" data-options="A;B;C;D;E" id="test0">

原因是我依赖于 document.getElementById(name).innerHTML=...向它添加必要的标记。所以我的问题是：我们可以做些什么来替换、附加、修改、替换... html 文本<input>？innerHTML似乎不起作用，我找不到替代方法。

Answer 1

创建<div>、插入、<div>更改input？id

var input = document.getElementById('test0');

var slider = document.createElement('div');
slider.id = input.id;
slider.className = 'myslider';
slider.dataset.options = input.dataset.options;

input.id = null;
input.parentNode.insertBefore(slider, input);

现在你可以随心所欲地改变slider了。不过，我建议检查 DOM API 而不是将 HTML 扔进东西中。HTML 很混乱。