Inserting a element with Jquery

I have an application that uses a series of functions to render and populate form fields. 开发者_开发技巧I need to insert an arbitrary div underneath one of the form fields, but I'd rather not make any changes to the form code. Is there a way that I can just insert the field where I want it with Jquery? Thanks.

Try with:

$("<div>..</div>").insertAfter("#form-id")

$('input#whichInput').after($('<div/>'));

Inserts a div after the selected input.

Use the after function:

var $div = $("<div/>");
// (construct the content of your div)
$("#the_field").after($div);

Have a look at the DOM insertion sections in the documentation (see the tree on the left hand side of the page) http://api.jquery.com/category/manipulation/.

You can select an element and insert your div before it, inside it (at the start or end) or after it, depending on your needs.

Also, in this case:
.after returns the form
.insertAfter returns the div

Depending on whether the form or div needs another method chained to it will influence the decision on which to use.

Example:

<div id="d">
</div>


$('#d').append('child');

<div id="d">
    child
</div>



$('<div>child</div>').appendTo('#d');
<div id="d">
    <div>child</div>
</div>


$('#d').after('<b>after</b>');
<div id="d">
</div><b>after</b>