How to get element by ID from selected HTML?

Question

I get element by id:

   var toolbarAreaElement = document.getElementById('toolbarArea');

From selected element(toolbarAreaElement) above I need to get another element by Id:

   var toolbarAreaElement = toolbarAreaElement.getElementById('3');

but this attitude:

 var toolbarAreaElement = toolbarAreaElement.getElementById('3');

Is wrong because I get error 'undefined'.

Any idea how can I get element by ID from selected HTML?

Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Pankaj Makwana, Mar 27 '18 at 06:27
getElementById is a method only available on document, not like other method like getElementsBy... which are available on all element nodes. — CBroe, Mar 27 '18 at 06:28
I think you are looking for `toolbarAreaElement.querySelector('#3')` see https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector. However `document.getElementById('3')` will fulfill the requirement — Satpal, Mar 27 '18 at 06:32
You tagged this "jquery" so you might want to use [the jquery way (link)](https://api.jquery.com/id-selector/): `$('#3')`. If you wanted to find it from inside another element, you could either do it like this [`$('#toolbarArea #3')` (link)](https://jsfiddle.net/lollero/dbumxs71/) or by using the [`find()` (link)](https://api.jquery.com/find/) method: `$('#toolbarArea').find('#3')` or [`var toolbarArea = $('#toolbarArea'); var n3 = toolbarArea.find('#3');` (link)](https://jsfiddle.net/lollero/dbumxs71/1/) — Joonas, Mar 27 '18 at 06:46
@Joonas thanks, if I use this row $('#toolbarArea #3') any idea how can I get the position of the element? I tryed position() but it dosent works. — Michael, Mar 27 '18 at 06:50
Michael, depends on what you want from it. [`offset()`](http://api.jquery.com/offset/) is relative to the document and [`position()`](https://api.jquery.com/position/) is relative to the parent. They are both used the same way. They return an object similar to this: `{ top: 0, left: 0 }`. So you can do `n3.offset().left` to get the left offset in pixels. — Joonas, Mar 27 '18 at 06:56

score 3 · Answer 1 · answered Mar 27 '18 at 06:30

You should not need to search an element for an ID. Use:

document.getElementById('3');

The ID is case-sensitive string which is unique within the document; only one element may have any given ID.

Deepu Reghunath · Answer 2 · 2018-03-27T06:45:12.750

0

if you use querySelector you will get the element from selected html.

var toolbarAreaElement = document.getElementById('toolbarArea');
console.log(toolbarAreaElement.querySelector("#ele1"));

<div id="toolbarArea">
<input id="ele1"/>
<input id="ele2"/>
<input id="ele3"/>
</div>

edited Mar 27 '18 at 06:45

answered Mar 27 '18 at 06:35

Deepu Reghunath

8,132
2
38
47

score 0 · Answer 3 · answered Mar 27 '18 at 06:39

This can be the explanation to the problem. getElementById returns object of class Element which does not have the method getElementById so you will not be able to call it from toolbarAreaElement.

You can directly get access to the required element by using getElementById method of document

document.getElementById('3')

How to get element by ID from selected HTML?

3 Answers3