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

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

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

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

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

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?

How do I get the next element in HTML using JavaScript?

Suppose I have three <div>s and I get a reference to one in JavaScript code, I want to get which is the next <div> and which is the previous.

This question is related to javascript html dom

The answer is

Really depends on the overall structure of your document.

If you have:

<div></div>
<div></div>
<div></div>

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.

Tested it and it worked for me. The element finding me change as per the document structure that you have.

<html>
    <head>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <form method="post" id = "formId" action="action.php" onsubmit="return false;">
            <table>
                <tr>
                    <td>
                        <label class="standard_text">E-mail</label>
                    </td>
                    <td><input class="textarea"  name="mail" id="mail" placeholder="E-mail"></label></td>
                    <td><input class="textarea"  name="name" id="name" placeholder="E-mail">   </label></td>
                    <td><input class="textarea"  name="myname" id="myname" placeholder="E-mail"></label></td>
                    <td><div class="check_icon icon_yes" style="display:none" id="mail_ok_icon"></div></td>
                    <td><div class="check_icon icon_no" style="display:none" id="mail_no_icon"></div></label></td>
                    <td><div class="check_message" style="display:none" id="mail_message"><label class="important_text">The email format is not correct!</label></div></td>
                </tr>
            </table>
            <input class="button_submit" type="submit" name="send_form" value="Register"/>
        </form>
    </body>
</html>

var inputs;
document.addEventListener("DOMContentLoaded", function(event) {
    var form = document.getElementById('formId');
    inputs = form.getElementsByTagName("input");
    for(var i = 0 ; i < inputs.length;i++) {
        inputs[i].addEventListener('keydown', function(e){
            if(e.keyCode == 13) {
                var currentIndex = findElement(e.target)
                if(currentIndex > -1 && currentIndex < inputs.length) {
                    inputs[currentIndex+1].focus();
                }
            }   
        });
    }
});

function findElement(element) {
    var index = -1;
    for(var i = 0; i < inputs.length; i++) {
        if(inputs[i] == element) {
            return i;
        }
    }
    return index;
}

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.

This will be easy... its an pure javascript code

    <script>
           alert(document.getElementById("someElement").previousElementSibling.innerHTML);
    </script>

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_

that's so simple

var element = querySelector("div")
var nextelement = element.ParentElement.querySelector("div+div")

Here is the browser supports https://caniuse.com/queryselector

There is a attribute on every HTMLElement, "previousElementSibling".

Ex:

<div id="a">A</div>
<div id="b">B</div>
<div id="c">c</div>

<div id="result">Resultado: </div>

var b = document.getElementById("c").previousElementSibling;

document.getElementById("result").innerHTML += b.innerHTML;

Live: http://jsfiddle.net/QukKM/

Its quite simple. Try this instead:

let myReferenceDiv = document.getElementById('mydiv');
let prev = myReferenceDiv.previousElementSibling;
let next = myReferenceDiv.nextElementSibling;

Source: Stackoverflow.com