add <div> around/after <input> in pure javascript

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.

In your code you have var n = parseInt(value); return n == null ... For what value of value will parseInt(value) == null be true? The way I read ECMA-262, parseInt only returns either an integer or NaN. — RobG
– RobG, Commented Jan 15, 2013 at 5:02

Ry- · Accepted Answer · 2013-01-15 04:45:01Z

2

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.

answered Jan 15, 2013 at 4:45

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1111929 Over a year ago

A.parentNode.insertBefore(B,A);, nice, I didn't know that. Works like a charm, thanks!

Collectives™ on Stack Overflow

add <div> around/after <input> in pure javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related