how to insert a variable with data in jquery?

Question

If I have a variable defined in jquery as follows:

var insertString = "<div id='divid'>";
    insertString += "<input type='text' name='textbox' value=''>";
    insertString += "</div>";

Now, if I want to insert the above variable 'insertString' before some DOM element, how can I do it? I tried Something like below with no success

  insertString.insertBefore("body");

A string does not have an insertBefore method, only jQuery objects do. You might want to try: $('body').prepend(insertString). — pimvdb
– pimvdb, Commented May 31, 2011 at 14:18
@pimvdb, that'll insert the string right after <body> which isn't what is asked for (although is quite possibly what is wanted). — tjm
– tjm, Commented May 31, 2011 at 14:20
@tjm: I don't really know - why would you insert a div before the body element anyway? — pimvdb
– pimvdb, Commented May 31, 2011 at 14:22
use $('body').appendTo(insertString); //jQuery will convert your string into DOM nodes. Cha ching! — John Strickler
– John Strickler, Commented May 31, 2011 at 14:22

Briguy37 · Accepted Answer · 2011-05-31 14:20:42Z

3

I would not recommend inserting that before the body tag as that content belongs inside of it, but here's how you would insert it before an element with id='foo'.

$(insertString).insertBefore('#foo');

Update: Here's a fiddle to test the functionality

answered May 31, 2011 at 14:20

Briguy37

8,4523 gold badges36 silver badges53 bronze badges

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

Comments

Lightness Races in Orbit · Accepted Answer · 2011-05-31 14:21:48Z

3

Don't insert before the body. Contents goes in the body.

Why not prependTo instead?

Also, you attempt to run a jQuery member function on a string, not on a jQuery object. You need to form the jQuery object from the string.

Finally, you forgot to close your input tag.

Like this:

$(function() {
    var insertString = "<div id='divid'>";
    insertString += "<input type='text' name='textbox' value='' />";
    insertString += "</div>";

    $(insertString).prependTo("body");
});

answered May 31, 2011 at 14:21

Lightness Races in Orbit

387k77 gold badges670 silver badges1.1k bronze badges

Comments

Billy Moon · Accepted Answer · 2011-05-31 14:22:33Z

2

You should be able to wrap your html in a $() function thus passing it to jQuery and creating a jquery object. Then you can operate on that object by chaining jQuery functions like this:

$(insertString).insertBefore("body");

But it would be pretty weird to put a div BEFORE the body... maybe it is better to prepend it to the body like this...

$(insertString).prependTo("body");

answered May 31, 2011 at 14:22

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

1 Comment

Lightness Races in Orbit Over a year ago

You mean prependTo, or reverse the target and source.

Collectives™ on Stack Overflow

how to insert a variable with data in jquery?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related