How to get child element by ID in JavaScript

Question

I have following html    lt div id  note  gt   lt textarea id  textid  class  textclass  gt Text lt  textarea gt   lt  div gt    How can I get textarea element  I can t use document getElementById  textid   for it  I m doing it like this now   var note   document getElementById  note    var notetext   note querySelector   textid      but it doesn t work in IE 8   How else I can do it  jQuery is ok  Thanks

User · Answer

Dwell in atom    lt div id  note  gt       lt textarea id  textid  class  textclass  gt Text lt  textarea gt    lt  div gt    lt script type  text javascript  gt      var note   document getElementById  textid   value      alert note     lt  script gt

User · Answer

Here is a pure JavaScript solution  without jQuery   var  Utils   function          this findChildById   function  element  childID  isSearchInnerDescendant     isSearchInnerDescendant  lt   true for search in inner childern                var retElement   null          var lstChildren   isSearchInnerDescendant   Utils getAllDescendant element    element childNodes           for  var i   0  i  lt  lstChildren length  i                          if  lstChildren i  id    childID                                retElement   lstChildren i                   break                                   return retElement             this getAllDescendant   function  element  lstChildrenNodes                lstChildrenNodes   lstChildrenNodes   lstChildrenNodes                var lstChildren   element childNodes           for  var i   0  i  lt  lstChildren length  i                           if  lstChildren i  nodeType    1     1 is  ELEMENT NODE                                lstChildrenNodes push lstChildren i                    lstChildrenNodes   Utils getAllDescendant lstChildren i   lstChildrenNodes                                    return lstChildrenNodes                  var Utils   new  Utils    Example of use   var myDiv   document createElement  div    myDiv innerHTML     lt table id  tableToolbar  gt                               lt tr gt                                   lt td gt                                       lt div id  divIdToSearch  gt                                       lt  div gt                                   lt  td gt                               lt  tr gt                           lt  table gt     var divToSearch   Utils findChildById myDiv   divIdToSearch   true

User · Answer

Using jQuery      note textarea      or just      textid

User · Answer

selectedDOM  find      function looking for all dom objects inside the selected DOM  i e     lt div id  mainDiv  gt       lt p gt Paragraph 1 lt  p gt       lt p gt Paragraph 2 lt  p gt       lt div id  innerDiv  gt            lt a href     gt link lt  a gt            lt p gt Paragraph 3 lt  p gt       lt  div gt   lt  div gt    here if you write       mainDiv   find  p      you will get tree p elements together  On the other side        mainDiv   children  p      Function searching in the just children DOMs of the selected DOM object  So  by this code you will get just paragraph 1 and paragraph 2  It is so beneficial to prevent browser doing unnecessary progress

User · Answer

If jQuery is okay  you can use find    It s basically equivalent to the way you are doing it right now       note   find   textid      You can also use jQuery selectors to basically achieve the same thing       note  textid      Using these methods to get something that already has an ID is kind of strange  but I m supplying these assuming it s not really how you plan on using it   On a side note  you should know ID s should be unique in your webpage  If you plan on having multiple elements with the same  ID  consider using a specific class name   Update 2020 03 10  It s a breeze to use native JS for this   document querySelector   note  textid      If you want to first find  note then  textid you have to check the first querySelector result  If it fails to match  chaining is no longer possible     var parent   document querySelector   note    var child   parent   parent querySelector   textid     null

[javascript] How to get child element by ID in JavaScript?

Examples related to javascript

Examples related to jquery

Examples related to element