jQuery Create element inside an element

Question

I've seen many guides online for create a new element in jQuery such as the following code

var input = $('<input>', {
    id: 'FormUsername',
    name: 'username',
    type: 'text',
    value: 'Enter your username...',
    focusin: function() {
        $(this).val('');
    }
}).appendTo(someElement);

This creates one input element and appends it. I want to create a div element and add this input element to it and then append it. How would i go about doing that?

Thanks, Alex

Append and add is same thing in above context. Your question does not make sense. — Sarfraz
– Sarfraz, Commented Mar 6, 2012 at 16:53

Didier Ghys · Accepted Answer · 2012-03-06 17:07:30Z

5

You can use .wrap() to wrap your element into another one before appending it:

var input = $('<input>', {
    id: 'FormUsername',
    name: 'username',
    type: 'text',
    value: 'Enter your username...',
    focusin: function() {
        $(this).val('');
    }
}).wrap('<div/>').parent().appendTo(someElement);

Note: you'd have to call .parent() because .wrap() does not return the wrapping element

DEMO

You could also do it in several steps if you need to add attributes to the wrapping div, syntax is similar:

var input = $('<input>', { ... });

// create a div element with an ID=wrapper
$('<div/>', { id: 'wrapper' })
    // append the input to it
    .append(input)
    // append the div to "someElement"
    .appendTo(someElement);

DEMO

edited Mar 6, 2012 at 17:07

answered Mar 6, 2012 at 16:54

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

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

Comments

Ry- · Accepted Answer · 2012-03-06 16:54:21Z

1

Same syntax, really:

var input = $('<input>', {
    id: 'FormUsername',
    name: 'username',
    type: 'text',
    value: 'Enter your username...',
    focusin: function() {
        $(this).val('');
    }
});

var div = $('<div>', {
    id: 'SomeWrapperDiv'
}).append(input);

div.appendTo(someElement);

answered Mar 6, 2012 at 16:54

Ry-♦

226k56 gold badges496 silver badges504 bronze badges

4 Comments

gdoron Over a year ago

Verbose... why not use wrap?

Ry- Over a year ago

@gdoron: See comment on ShankarSangoli's answer by the OP below.

Ry- Over a year ago

@gdoron: I'm confused; why is it a problem that there are requirements to have an id attribute?

gdoron Over a year ago

It's o.k. but he just did it with the input, do just do the same with the div, why are you asking??? (I blame him, not you...)

Simon Edström · Accepted Answer · 2012-03-06 16:56:04Z

0

This maybe help you:

http://jsfiddle.net/Eek7N/1/

var div = $("<div>");

var input = $('<input>', {
id: 'FormUsername',
name: 'username',
type: 'text',
value: 'Enter your username...',
focusin: function() {
    $(this).val('');
}
});

div.html("I'm the div");

div.append(input);

$("body").append(div);

answered Mar 6, 2012 at 16:56

Simon Edström

6,6178 gold badges34 silver badges52 bronze badges

Comments

Jamiec · Accepted Answer · 2012-03-06 16:58:20Z

0

And another way:

$('#someElement').append($('<span></span>').append(input));

http://jsfiddle.net/xcZjt/

answered Mar 6, 2012 at 16:58

Jamiec

136k15 gold badges141 silver badges202 bronze badges

Comments

ShankarSangoli · Accepted Answer · 2012-03-06 17:03:50Z

0

You can try this.

  var input = $('<input>', {
    id: 'FormUsername',
    name: 'username',
    type: 'text',
    value: 'Enter your username...',
    focusin: function() {
        $(this).val('');
    }
  })
  $('<div>', {
    id: 'divId',
    class: 'className'
  })
  .append(input)
  .appendTo(someElement);

edited Mar 6, 2012 at 17:03

answered Mar 6, 2012 at 16:53

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

4 Comments

user1246035 Over a year ago

but i want to add an id and classes to the div also using the same way i did with the input.

James Montagne Over a year ago

wrap returns the original set of elements, not the wrappers.

ShankarSangoli Over a year ago

@JamesMontagne - I think wrap will return the element wrapped with element you pass.

James Montagne Over a year ago

But if you call append it will only append the original elements to the dom. jsfiddle.net/xzrTx/3

gdoron · Accepted Answer · 2012-03-06 17:58:12Z

0

Use the wrap function:

var input = $('<input>', {
id: 'FormUsername',
name: 'username',
type: 'text',
value: 'Enter your username...',
focusin: function() {
    $(this).val('');
}
}).wrap('<div></div>').parent().appendTo(someElement);

wrap docs:

Description: Wrap an HTML structure around each element in the set of matched elements.

edited Mar 6, 2012 at 17:58

answered Mar 6, 2012 at 16:53

gdoron

151k59 gold badges302 silver badges376 bronze badges

2 Comments

James Montagne Over a year ago

wrap returns the original set of elements, not the wrappers.

gdoron Over a year ago

@JamesMontagne. Right. fixed.

Collectives™ on Stack Overflow

jQuery Create element inside an element

6 Answers 6

Comments

4 Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related