Can't insert html using jquery

Question

I want to create HTML like this

<div id="positional">
   <div>
    <div>
       <label for='azimuth'>Azimuth</label>
    </div>
    <div>
       <input id='azimuth'>
    </div>
   </div>
</div>

I was trying to use this, but I can't get it to work, can you help?

$("<div><input id='azimuth'></div>")
.insertAfter("<div><label for='azimuth'>Azimuth</label></div>")
.wrap("<div></div>")
.appendTo("#positional");

Assume <div id="Positional"> has already been created. Thanks, I'm pulling my hair out.

EDIT: I know I could just hand insert the HTML in one unreadable blob, but I'm trying to do it step by step and understand the problem. In this the div containing the label doesn't appear.

EDIT2: Seriously, if anyone could explain why this doesn't work, I would be very grateful.

What's wrong with html()? $('#positional').html("<div><div><label for='azimuth'>Azimuth</label></div><div><input id='azimuth'></div></div>') — George
– George, Commented Aug 14, 2014 at 15:51
$("#positional").append("<div><div><label for='azimuth'>Azimuth</label></div><div><input id='azimuth'></div></div>"); Demo — emerson.marini
– emerson.marini, Commented Aug 14, 2014 at 15:51
My blob is certainly not unreadable, sir. Thou has deeply offended. Pistols at dawn! — isherwood
– isherwood, Commented Aug 14, 2014 at 16:07

isherwood · Accepted Answer · 2014-08-14 15:51:13Z

5

Unless there's more to the story than what you've mentioned, this should do fine.

var myHtml = '<div>'
    + '<div>'
    + '   <label for="azimuth">Azimuth</label>'
    + '</div>'
    + '<div>'
    + '   <input id="azimuth">'
    + '</div>'
    + '</div>';

$('#positional').html(myHtml);

answered Aug 14, 2014 at 15:51

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

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

4 Comments

emerson.marini Over a year ago

I'll stay in the comments this time.

James Over a year ago

No I just wanted to do it using JQuery operators and understand why it wasn't working.

isherwood Over a year ago

Fair enough, but then your question is too broad. You'll want to break it up into individual methods and study each step. That said, I'd consider this solution much more readable than what's in your OP, unless a person is very well versed in jQuery-ese.

Ruan Mendes Over a year ago

One thing that some love about jQuery is this ability to chain commands. I absolutely abhor it, it does not make it easier to read in but a few cases and it always makes it harder to debug besides ruining meaningful code coverage. However, this does not explain what the problem with the code is. My answer does explain what the problem is, points out a solution like what the OP wants and does point out that your suggestion is much more readable.

Community · Accepted Answer · 2017-05-23 10:33:32Z

The $.wrap, $.after, $.appendTo don't work with in memory nodes. See JQuery: Build HTML in 'memory' rather than DOM

Put your starting node into the DOM before calling those methods http://jsfiddle.net/j824yyng/2/

$("<div><label for='azimuth'>Azimuth</label></div>")
.appendTo("#positional")
.wrap("<div></div>")
.after("<div><input id='azimuth'></div>");

As others have pointed out, this is not very readable. It may be a good lesson in jQuery but I would hate you if I had to modify the code above instead of the straight forward version.

Rumplin · Accepted Answer · 2014-08-14 15:52:29Z

1

$('#positional').html('<div><div><label for="azimuth">Azimuth</label></div><div><input id="azimuth"></div></div>');

answered Aug 14, 2014 at 15:52

Rumplin

2,77822 silver badges46 bronze badges

1 Comment

Michael Lang Over a year ago

This seems to be what you would do if an AJAX request returned an html blob to put in a container. Short of more requirements in the question, this is a good answer.

Collectives™ on Stack Overflow

Can't insert html using jquery

3 Answers 3

4 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Linked

Related