add an element AFTER another?

Question

when i use append it add an element WITHIN an element. i want to add an element AFTER an element.

eg.

 <div class="link">
       <input class="link" type="text" value="Skriv länk" />
       <br />
 </div>

how do i add an element after 'input' but before 'br'?

Answer 1

$("input").after("<p>Hello</p>");

After on jQuery doc: http://api.jquery.com/after/

You also have the insertAfter:

$("<p>Hello</p>").insertAfter("input");

Will work just fine.

Answer 2

Use insertBefore() or insertAfter().

Answer 3

// create your element
var $el = $("<div>");

// append after input
$("input.link").after( $el );

Answer 4

You should really add an id attribute to your input not only for performance but to be sure that you append only after that specific input:

<div class="link">
       <input id="textBox" class="link" type="text" value="Skriv länk" />
       <br />
 </div>

if using jquery

$("#textBox").after("<p>Hello</p>");

else

var textBox = document.getElementById("textBox");
var element = document.createElement("<p>Hello</p>");
textBox.parentNode.insertBefore(element, textBox.nextSibling);