Simple way to get element by id within a div tag

Question

Please forgive me if I repeat the question   I have HTML that all elements inside a div tag has different id  suppose I have already get the reference to the div  is there any simple way to get the element by its id without iterate all elements with that div   here is my sample html    lt div id  div1   gt       lt input type  text  id  edit1    gt       lt input type  text  id  edit2    gt   lt  div gt   lt div id  div2   gt       lt input type  text  id  edit1    gt       lt input type  text  id  edit2    gt   lt  div gt

User · Answer

A given ID can be only used once in a page. It's invalid HTML to have multiple objects with the same ID, even if they are in different parts of the page.

You could change your HTML to this:

<div id="div1" >
    <input type="text" class="edit1" />
    <input type="text" class="edit2" />
</div>
<div id="div2" >
    <input type="text" class="edit1" />
    <input type="text" class="edit2" />
</div>

Then, you could get the first item in div1 with a CSS selector like this:

#div1 .edit1

On in jQuery:

$("#div1 .edit1")

Or, if you want to iterate the items in one of your divs, you can do it like this:

$("#div1 input").each(function(index) {
    // do something with one of the input objects
});

If I couldn't use a framework like jQuery or YUI, I'd go get Sizzle and include that for it's selector logic (it's the same selector engine as is inside of jQuery) because DOM manipulation is massively easier with a good selector library.

If I couldn't use even Sizzle (which would be a massive drop in developer productivity), you could use plain DOM functions to traverse the children of a given element.

You would use DOM functions like childNodes or firstChild and nextSibling and you'd have to check the nodeType to make sure you only got the kind of elements you wanted. I never write code that way because it's so much less productive than using a selector library.

User · Answer

var x   document getElementById  parent   querySelector   child       don t forget a     or  var x   document querySelector   parent   querySelector   child      or  var x   document querySelector   parent  child      or  var x   document querySelector   parent    var y   x querySelector   child      eg   var x   document querySelector   div1   querySelector   edit2

User · Answer

A simple way to do what OP desires in core JS   document getElementById parent id  children child id

User · Answer

Sample Html code      lt div id  temp  gt          F1  lt input type  text  value  111   gt  lt br  gt          F2  lt input type  text  value  222   gt  lt br  gt          F3  lt input type  text  value  333   gt  lt br  gt          Type  lt select gt           lt option value  A  gt A lt  option gt           lt option value  B  gt B lt  option gt           lt option value  C  gt C lt  option gt           lt  select gt           lt input type  button  value  Go  onclick  getVal    gt       lt  div gt   Javascript      function  getVal                 var test   document getElementById  temp   getElementsByTagName  input            alert  Number of Input Elements   test length           for var i 0 i lt test length i                        if test i  type   text                           alert test i  value                              test   document getElementById  temp   getElementsByTagName  select          alert  Select box    test 0  options test 0  selectedIndex  text          By providing different tag names we can get all the values from the div

User · Answer

You may try something like this   Sample Markup    lt div id  div1   gt       lt input type  text  id  edit1    gt       lt input type  text  id  edit2    gt   lt  div gt   lt div id  div2   gt       lt input type  text  id  edit3    gt       lt input type  text  id  edit4    gt   lt  div gt    JavaScript  function GetElementInsideContainer containerID  childID        var elm           var elms   document getElementById containerID  getElementsByTagName           for  var i   0  i  lt  elms length  i              if  elms i  id     childID                elm   elms i               break                      return elm      Demo  http   jsfiddle net naveen H8j2A   A better method as suggested by nnnnnn   function GetElementInsideContainer containerID  childID        var elm   document getElementById childID       var parent   elm   elm parentNode           return  parent id  amp  amp  parent id     containerID    elm           Demo  http   jsfiddle net naveen 4JMgF   Call it like  var e   GetElementInsideContainer  div1    edit1

User · Answer

In HTML ids should be unique  I suggest you change your code to something like this    lt div id  div1   gt       lt input type  text  name  edit1  id  edit1    gt       lt input type  text  name  edit2  id  edit2    gt   lt  div gt   lt div id  div2   gt       lt input type  text  name  edit1  id  edit3    gt       lt input type  text  name  edit2  id  edit4    gt   lt  div gt

User · Answer

Unfortunately this is invalid HTML  An ID has to be unique in the whole HTML file   When you use Javascript s document getElementById   it depends on the browser  which element it will return  mostly it s the first with a given ID   You will have no other chance as to re-assign your IDs  or alternatively using the class attribute

User · Answer

You don t want to do this  It is invalid HTML to have more than one element with the same id  Browsers won t treat that well  and you will have undefined behavior  meaning you have no idea what the browser will give you when you select an element by that id  it could be unpredictable    You should be using a class  or just iterating through the inputs and keeping track of an index   Try something like this   var div2   document getElementById  div2    for i   j   0  i  lt  div2 childNodes length  i        if div2 childNodes i  nodeName     INPUT            j            var input   div2 childNodes i           alert  This is edit  j      input           JSFiddle

[javascript] Simple way to get element by id within a div tag?

Examples related to javascript

Examples related to dom