How to write an element just after another with javascript?

Question

I need to append an element onclick just after another (a textarea).

How do I do that?

Answer 1

The accepted answer will work in this specific case, but to insert an element after another more generally, the following does the job:

someElement.parentNode.insertBefore(newElement, someElement.nextSibling);

Where newElement is the element to be inserted and someElement is the element it is to be inserted after.

W3C insertBefore method of the Node interface

Answer 2

Update: This question may not answer the question properly but it was selected as the right answer. So I am adding the correct answer here since most people don't scroll past it and the original author hasn't accessed Stackoverflow for many years now.

Correct answer from @RobG

var div = document.getElementById( 'div' );
var newText = document.createElement( 'textarea' ); // create new textarea
div.parentNode.insertBefore( newText, div.nextSibling );

Old Irrelevant answer:

You can use the appendChild method to add a new element

HTML

<div id='div'>
  <textarea></textarea>
</div>

Javascript

var div = document.getElementById('div');

var newText = document.createElement('textarea'); // create new textarea

div.appendChild(newText); // add it to the div

Resulting HTML

<div id='div'>
  <textarea></textarea>
  <textarea></textarea>
</div>

Answer 3

outerHTML method does the trick too:

allAloneElement.outerHTML+='<p>I am the new element</p>'