Get content of a div before and after id (or class) with native Javascript

Question

I'm trying (in native Javascript, so without jQuery or anything) to get content before and after occurence of a div.

HTML:

<div id="thisIsWhatIWant">
  <span>foo</span>
    <div id="helloWorld">hello world</div>
  <p>bar</p>
</div>

So I want to get <span>foo</span> and <p>bar</p> in separate vars.

JS:

var beforeElement_helloWorld = ...do something to get <span>foo</span>...
var afterElement_helloWorld  = ...do something to get <p>bar</p>...

note:
There may be many more divs, spans etc in the HTML example.

Answer 1

You need this:

var previous = document.getElementById("helloWorld").previousElementSibling;
var next = document.getElementById("helloWorld").nextElementSibling;

Also read this, The difference between previousSibling and previousElementSibling, is that previousSibling returns the previous sibling node as an element node, a text node or a comment node, while previousElementSibling returns the previous sibling node as an element node (ignores text and comment nodes).