Adding HTML elements with JavaScript

Question

So, if I have HTML like this:

<div id='div'>
  <a>Link</a>

  <span>text</span>
</div>

How can I use JavaScript to add an HTML element where that blank line is?

Answer 1

node = document.getElementById('YourID');
node.insertAdjacentHTML('afterend', '<div>Sample Div</div>');

Available Options

beforebegin, afterbegin, beforeend, afterend

Answer 2

As you didn't mention any use of javascript libraries (like jquery, dojo), here's something Pure javascript.

var txt = document.createTextNode(" This text was added to the DIV.");
var parent = document.getElementById('div');
parent.insertBefore(txt, parent.lastChild);

or

var link = document.createElement('a');
link.setAttribute('href', 'mypage.htm');
var parent = document.getElementById('div');
parent.insertAfter(link, parent.firstChild);