Question

I’m making a simple input slider in pure javascript (no jQuery). It works perfectly except for one little flaw: I need to call it in the html as

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

instead of the more natural

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

The reason for that is that I depend on document.getElementById(name).innerHTML=... to add the necessary markup to it. So my question is: what can we do to replace, append, modify, replace… html text around an <input>? The innerHTML seems not to work, and I fail to find an alternative.

Answer 1

Create <div>, insert <div>, change input‘s 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);

Now you can change slider to your heart’s content. I’d recommend checking out the DOM API instead of throwing HTML into things, though. HTML is messy.