How to find sibling tag using javascript

Question

I have the following HTML

            <div>
                <label for="username">Username:</label>
                <input type="text" name="username" id="username" />
                <span>some text here</span>
            </div>

now I have referenced the input "username" in javaScript using getElementById rather easily but I need to locate (via javascript) the text of the label associated with the input, I'm thinking something like this:

document.getElement(thisName).parent.getElementsByTagName('label')[0].innerHTML;

Any help is appreciated

This should help: http://stackoverflow.com/questions/285522/find-html-label-associated-with-a-given-input — Justin Ethier, Jun 18 '11 at 15:20

score 7 · Accepted Answer · answered Jun 18 '11 at 15:28

7

I think this is what you want:

document.getElementById('username').parentNode.getElementsByTagName('label')[0].innerHTML;

answered Jun 18 '11 at 15:28

Karolis

9,396
29
38

score 0 · Answer 2 · answered Jun 18 '11 at 15:29

You can use the .previousElementSibling property to get the previous sibling element.

If that property isn't supported, you can use a function to emulate it.

var inp = document.getElementById('username');

var lab = inp.previousElementSibling || previousElementSibling( inp );

function previousElementSibling( el ) {
    while( el && (el = el.previousSibling) && el.nodeType !== 1 );
    return el;
}

How to find sibling tag using javascript

2 Answers2