Retrieve child node from parent node

Question

I have created a document with html. I want to retrieve child node from the root node for that I am using following code...

That is HTML.

<a id="Main1" onclick="RetrieveElement(this);">Test1
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>
<a id="Main2" onclick="RetrieveElement(this);">Test2
<div name="Top1">
</div>
<div name="Middle1">
I'm Middle.
</div>
<div name="Bottom1">
</div>
</a>

javascript.

function RetrieveElement(element){
alert(this.getElementByName("Middle1").innerHTML);
}

However, That is not working. I have tried finding the problem but cant solve it... Any help ?

Answer 1

If you want to get the first child element only:

var element = document.getElementById('Main1').children[0];

If you want to get the first anchor element:

 var element = document.getElementById('Main1').getElementById('Middle1');

Answer 2

getElementById is a method of Document, not Element. Try this:

<script type="text/javascript">
    function RetrieveElement(element){
        window.alert(document.getElementById("Middle1").innerHTML);
    }

</script>

<a id="Main1" href="#" onclick="RetrieveElement(this);">Test1</a>
<div id="Top1">
</div>
<div id="Middle1">
    I'm Middle.
</div>
<div id="Bottom1">
</div>

Answer 3

Can you use jQuery?

It would be as easy as this