Get element inside element by class and ID - JavaScript

Question

Alright  I ve dabbled in JavaScript before  but the most useful thing I ve written is a CSS style-switcher  So I m somewhat new to this  Let s say I have HTML code like this   lt div id  quot foo quot  gt       lt div class  quot bar quot  gt          Hello world       lt  div gt   lt  div gt   How would I change Hello world  to Goodbye world   I know how document getElementsByClassName and document getElementById work  but I would like to get more specific  Sorry if this has been asked before

User · Answer

If this needs to work in IE 7 or lower you need to remember that getElementsByClassName does not exist in all browsers   Because of this you can create your own getElementsByClassName or you can try this   var fooDiv   document getElementById  foo     for  var i   0  childNode  i  lt   fooDiv childNodes length  i           childNode   fooDiv childNodes i       if   bar  test childNode className             childNode innerHTML    Goodbye world

User · Answer

THe easiest way to do so is   function findChild idOfElement  idOfChild     let element   document getElementById idOfElement     return element querySelector   id     idOfChild             or better readable   findChild    idOfElement  idOfChild    gt        let element   document getElementById idOfElement       return element querySelector   id   idOfChild

User · Answer

Recursive function     function getElementInsideElement baseElement  wantedElementID        var elementToReturn      for  var i   0  i  lt  baseElement childNodes length  i              elementToReturn   baseElement childNodes i           if  elementToReturn id    wantedElementID                return elementToReturn            else               return getElementInsideElement elementToReturn  wantedElementID

User · Answer

Well  first you need to select the elements with a function like getElementById   var targetDiv   document getElementById  foo   getElementsByClassName  bar   0     getElementById only returns one node  but getElementsByClassName returns a node list   Since there is only one element with that class name  as far as I can tell   you can just get the first one  that s what the  0  is for   it s just like an array    Then  you can change the html with  textContent   targetDiv textContent    Goodbye world       x000D   x000D  var targetDiv   document getElementById  foo   getElementsByClassName  bar   0   x000D  targetDiv textContent    Goodbye world    x000D   lt div id  foo  gt  x000D       lt div class  bar  gt  x000D          Hello world  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can do it like this   var list   document getElementById  foo   getElementsByClassName  bar    if  list  amp  amp  list length  gt  0        list 0  innerHTML    Goodbye world        or  if you want to do it with with less error checking and more brevity  it can be done in one line like this   document getElementById  foo   getElementsByClassName  bar   0  innerHTML    Goodbye world      In explanation    You get the element with id  foo   You then find the objects that are contained within that object that have class  bar   That returns an array-like nodeList  so you reference the first item in that nodeList You can then set the innerHTML of that item to change its contents    Caveats  some older browsers don t support getElementsByClassName  e g  older versions of IE    That function can be shimmed into place if missing     This is where I recommend using a library that has built-in CSS3 selector support rather than worrying about browser compatibility yourself  let someone else do all the work    If you want just a library to do that  then Sizzle will work great   In Sizzle  this would be be done like this   Sizzle   foo  bar   0  innerHTML    Goodbye world        jQuery has the Sizzle library built-in and in jQuery  this would be       foo  bar   html  Goodbye world

User · Answer

You should not used document getElementByID because   its work only for client side controls which ids are fixed   You should use jquery instead like below example    lt script src  https   ajax googleapis com ajax libs jquery 1 11 3 jquery min js  gt  lt  script gt                                                                                                                lt div id  foo  gt      lt div class  bar  gt             Hello world        lt  div gt   lt  div gt    use this        id   foo     find   class   bar         do not forget to add script tags as above   if you want any remove edit any operation then just add     behind and do the operations

[javascript] Get element inside element by class and ID - JavaScript

Examples related to javascript

Examples related to getelementbyid

Examples related to getelementsbyclassname