Get next / previous element using JavaScript?

by

use the nextSibling and previousSibling properties:

<div id="foo1"></div>
<div id="foo2"></div>
<div id="foo3"></div>

document.getElementById('foo2').nextSibling; // #foo3
document.getElementById('foo2').previousSibling; // #foo1

However in some browsers (I forget which) you also need to check for whitespace and comment nodes:

var div = document.getElementById('foo2');
var nextSibling = div.nextSibling;
while(nextSibling && nextSibling.nodeType != 1) {
    nextSibling = nextSibling.nextSibling
}

Libraries like jQuery handle all these cross-browser checks for you out of the box.

More Related Contents:

  1. How can I tell if a DOM element is visible in the current viewport?
  2. Include another HTML file in a HTML file
  3. Parse an HTML string with JS
  4. jQuery document.createElement equivalent?
  5. Browser detection versus feature detection
  6. How can I count text lines inside an DOM element? Can I?
  7. How do I create a link using javascript?
  8. How to append text to a “?
  9. Is it possible to run an .exe or .bat file on ‘onclick’ in HTML
  10. Find the closest ancestor element that has a specific class
  11. Retrieving the text of the selected in element
  12. Replace HTML page with contents retrieved via AJAX
  13. Pass mouse events through absolutely-positioned element
  14. getAttribute() versus Element object properties?
  15. How to get the HTML for a DOM element in javascript
  16. How to find a parent with a known class in jQuery?
  17. jQuery: how to change tag name?
  18. Why aren’t some technically serializable input properties serializable?
  19. How do you listen / detect changes to an input value – when the input value is changed via javascript?
  20. Adding images to an HTML document with JavaScript
  21. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  22. Add an element to the DOM with JavaScript
  23. Is it possible to use HTML’s .querySelector() to select by xlink attribute in an SVG?
  24. How to get the title of HTML page with JavaScript?
  25. How to append text to a div element?
  26. JQuery html() vs. innerHTML
  27. Accessing the document object of a frame with JavaScript
  28. Fill user name and password in a webpage using VBA
  29. Images failing to load in IE with DOM: 7009 error (unable to decode) in console
  30. Why is iframe.contentWindow == null?

Leave a Comment