Get next previous element using JavaScript

Question

How do I get the next element in HTML using JavaScript   Suppose I have three  lt div gt s and I get a reference to one in JavaScript code  I want to get which is the next  lt div gt  and which is the previous

User · Answer

all these solutions look like an overkill. Why use my solution?

previousElementSibling supported from IE9

document.addEventListener needs a polyfill

previousSibling might return a text

Please note i have chosen to return the first/last element in case boundaries are broken. In a RL usage, i would prefer it to return a null.

_x000D_

var el = document.getElementById("child1"),_x000D_
    children = el.parentNode.children,_x000D_
    len = children.length,_x000D_
    ind = [].indexOf.call(children, el),_x000D_
    nextEl = children[ind === len ? len : ind + 1],_x000D_
    prevEl = children[ind === 0 ? 0 : ind - 1];_x000D_
    _x000D_
    document.write(nextEl.id);_x000D_
    document.write("<br/>");_x000D_
    document.write(prevEl.id);

_x000D_

<div id="parent">_x000D_
  <div id="child1"></div>_x000D_
  <div id="child2"></div>_x000D_
</div>

_x000D_

User · Answer

use the nextSibling and previousSibling properties    lt div id  foo1  gt  lt  div gt   lt div id  foo2  gt  lt  div gt   lt div id  foo3  gt  lt  div gt   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  amp  amp  nextSibling nodeType    1        nextSibling   nextSibling nextSibling     Libraries like jQuery handle all these cross-browser checks for you out of the box

User · Answer

Tested it and it worked for me  The element finding me change as per the document structure that you have    lt html gt       lt head gt           lt script type  text javascript  src  test js  gt  lt  script gt       lt  head gt       lt body gt           lt form method  post  id    formId  action  action php  onsubmit  return false   gt               lt table gt                   lt tr gt                       lt td gt                           lt label class  standard text  gt E-mail lt  label gt                       lt  td gt                       lt td gt  lt input class  textarea   name  mail  id  mail  placeholder  E-mail  gt  lt  label gt  lt  td gt                       lt td gt  lt input class  textarea   name  name  id  name  placeholder  E-mail  gt     lt  label gt  lt  td gt                       lt td gt  lt input class  textarea   name  myname  id  myname  placeholder  E-mail  gt  lt  label gt  lt  td gt                       lt td gt  lt div class  check icon icon yes  style  display none  id  mail ok icon  gt  lt  div gt  lt  td gt                       lt td gt  lt div class  check icon icon no  style  display none  id  mail no icon  gt  lt  div gt  lt  label gt  lt  td gt                       lt td gt  lt div class  check message  style  display none  id  mail message  gt  lt label class  important text  gt The email format is not correct  lt  label gt  lt  div gt  lt  td gt                   lt  tr gt               lt  table gt               lt input class  button submit  type  submit  name  send form  value  Register   gt           lt  form gt       lt  body gt   lt  html gt     nbsp   var inputs  document addEventListener  DOMContentLoaded   function event        var form   document getElementById  formId        inputs   form getElementsByTagName  input        for var i   0   i  lt  inputs length i              inputs i  addEventListener  keydown   function e               if e keyCode    13                    var currentIndex   findElement e target                  if currentIndex  gt  -1  amp  amp  currentIndex  lt  inputs length                        inputs currentIndex 1  focus                                                              function findElement element        var index   -1      for var i   0  i  lt  inputs length  i              if inputs i     element                return i                      return index

User · Answer

This will be easy    its an pure javascript code       lt script gt             alert document getElementById  someElement   previousElementSibling innerHTML        lt  script gt

User · Answer

Well in pure javascript my thinking is that you would first have to collate them inside a collection     var divs   document getElementsByTagName  div      divs now contain each and every div element on the page var selectionDiv   document getElementById  MySecondDiv      So basically with selectionDiv iterate through the collection to find its index  and then obviously -1   previous  1   next within bounds  for var i   0  i  lt  divs length i         if divs i     selectionDiv            var previous   divs i - 1        var next   divs i   1            Please be aware though as I say that extra logic would be required to check that you are within the bounds i e  you are not at the end or start of the collection   This also will mean that say you have a div which has a child div nested   The next div would not be a sibling but a child  So if you only want siblings on the same level as the target div then definately use nextSibling checking the tagName property

User · Answer

Really depends on the overall structure of your document   If you have    lt div gt  lt  div gt   lt div gt  lt  div gt   lt div gt  lt  div gt    it may be as simple as traversing through using  mydiv nextSibling  mydiv previousSibling    However  if the  next  div could be anywhere in the document you ll need a more complex solution  You could try something using  document getElementsByTagName  div      and running through these to get where you want somehow   If you are doing lots of complex DOM traversing such as this I would recommend looking into a library such as jQuery

User · Answer

Its quite simple  Try this instead  let myReferenceDiv   document getElementById  mydiv    let prev   myReferenceDiv previousElementSibling  let next   myReferenceDiv nextElementSibling

User · Answer

that s so simple var element   querySelector  quot div quot   var nextelement   element ParentElement querySelector  quot div div quot    Here is the browser supports https   caniuse com queryselector

User · Answer

There is a attribute on every HTMLElement   previousElementSibling    Ex    lt div id  a  gt A lt  div gt   lt div id  b  gt B lt  div gt   lt div id  c  gt c lt  div gt    lt div id  result  gt Resultado   lt  div gt      var b   document getElementById  c   previousElementSibling   document getElementById  result   innerHTML    b innerHTML    Live  http   jsfiddle net QukKM

[javascript] Get next / previous element using JavaScript?

Examples related to javascript

Examples related to html

Examples related to dom