CODEWITHSUNDEEP
javascripthtmldom
John Stimac
John Stimac

Reputation: 5493

Adding HTML elements with JavaScript

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?

Upvotes: 27

Views: 67624

Answers (7)

Unmitigated
Unmitigated

Reputation: 89139

Element#after can be used to insert elements directly after a certain HTML element.

For example:

document.querySelector("#div > a").after(
  Object.assign(document.createElement('div'), {textContent: 'test', style: 'border: 1px solid'}));
<div id='div'>
  <a>Link</a>

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

Upvotes: 1

simplyharsh
simplyharsh

Reputation: 36353

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);

Upvotes: 14

Saqib R.
Saqib R.

Reputation: 3069

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

Available Options

beforebegin, afterbegin, beforeend, afterend

Upvotes: 52

Daniel Vandersluis
Daniel Vandersluis

Reputation: 94103

Instead of dealing with the <div>'s children, like other answers, if you know you always want to insert after the <a> element, give it an ID, and then you can insert relative to its siblings:

<div id="div">
  <a id="div_link">Link</a>

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

And then insert your new element directly after that element:

var el = document.createElement(element_type); // where element_type is the tag name you want to insert
// ... set element properties as necessary

var div = document.getElementById('div');
var div_link = document.getElementById('div_link');
var next_sib = div_link.nextSibling;

if (next_sib)
{
  // if the div_link has another element following it within the link, insert
  // before that following element
  div.insertBefore(el, next_sib);
}
else
{
  // otherwise, the link is the last element in your div,
  // so just append to the end of the div
  div.appendChild(el);
}

This will allow you to always guarantee your new element follows the link.

Upvotes: 7

tcooc
tcooc

Reputation: 21199

Assuming that you are only adding one element:

document.getElementById("div").insertBefore({Element}, document.getElementById("div").children[2]);

Upvotes: 0

ford
ford

Reputation: 1887

jQuery has a nice, built in function for this: after(), at http://api.jquery.com/after/

In your case, you will probably want a selector like this:

$('#div a').after('<p>html element to add</p>');

The code examples from the link given above also show how to load jQuery if that is new to you.

Upvotes: 3

jigfox
jigfox

Reputation: 18185

If you want to use something like jQuery you can do something like this:

$('#div a').after("Your html element");

Upvotes: 5

Related Questions