JavaScript-如何获取元素的ID

Question

<div id="block_msg" style="width:250px;border: solid 1px red;margin: 15px">

<div id="text_msg1">111текст111</div>

<input type="submit" onclick="clickon(**<<<HERE I WANT SEE DIV ID TEXT_MSG1>>>**)" value="Добавить">

</div>

How i can get id="text_msg1" and put it into onclick. How? Thanks!

Answer 1

this is the current object, you can than look at the parent and find the divs. This solution is hacky since changing the layout means it will break.

onclick="clickon(this)"

and

function clickon(btn) {
    var wrappingDiv = btn.parentNode;
    var childrenDivs = wrappingDiv.getElementsByTagName("div");
    alert(childrenDivs[0].innerHTML);
}

JSFiddle

It would be better to have a class on the div and look for that class.

Answer 2

If you want to get the previous element sibling, traverse the DOM until you find it:

function get_previous_element_sibling(element) {
    var prev = element.previousSibling;

    while (prev && prev.nodeType !== 1) {
        prev = prev.previousSibling;
    }

    return prev;
}

Then you can get the previous sibling with:

get_previous_element_sibling(this)

and its ID with

get_previous_element_sibling(this).id

Answer 3

Based on your comment yes, preceding! this line yes, preceding! this line will not work with IE8 and lower because of previousElementSibling

<input type="submit" onclick="clickon(this.previousElementSibling.id)" value="Добавить">

or using jQuery for cross browser support

<input type="submit" onclick="clickon($(this).prev().attr('id'))" value="Добавить">