Question

What I need is to wrap HTML around a current div, this is what I got so far:

HTML:

<input type="text" data-placeholder="username" />

Needs to be rendered as:

<div class="placeholding-input">
  <input type="text" data-placeholder="username" />
  <label>Username</label>
</div>

What I got so far:

$.each($('input[type="text"], input[type="password"], textarea'), function(){
    var input = $(this);
    var container = $('<div />').addclass('placeholding-input');
    input.wrap(container);
    var label = $('<label />').html(input.data('placeholder')).appendTo(container);
});

But that ain’t working for some reason, I have no idea why.

Thanks for help 🙂

Answer 1

var container = $('<div />').addclass('placeholding-input');

To:

var container = $('<div />').addClass('placeholding-input');
//                              ^--------------------- upperCase

Full code:

$('input[type="text"], input[type="password"], textarea').each(function() {
    var input = $(this);
    var container = $('<div>').addClass('placeholding-input');
    var label = $('<label>').html(input.data('placeholder'));
    input.wrap(container).after(label);
});​

DEMO