Locating Dynamic Elements Through innerHTML

Question

I need to test a particular innerHTML string on a webpage that loads user information. My issue is, the location [14] of this element varies based on other account details being present or not. (i.e. sometimes this innerHTML is [15] or [16]) The innerHTML has no identifier other than class name "style16".

Moreso the innerHTML changes between each account, and thus why I need to test its value.

Do I need to create some sort of var to reference this element location? If so, how do I make it.

Here's the HTML:

<tr>
  <td class="style16">Zip:</td>
  <td>12345</td>
</tr>
<tr>
  <td class="style16">CountryCode:</td>
  <td>TH</td>
</tr>

I am new to DOM and Javascript so apologies if this is confusing.

Thanks in advance

Answer 1

function find(elem){
  if(elem.innerHTML=="TD"){
     return elem;//found elem lets return
  }
  for(child of elem.childNodes){
    if(var a=find(child)){
      return a;//a child of child of child... is the searched one, so return it
    }
  }
 return false;//nothing found
}

Use like this:

window.onload=function(){
elem=find(document.body);
if(elem){
// now you can use elem until it is destroyed...
elem.innerHTML="found this";
}else{
alert("Sorry doesnt exist");
}
}

Note: the bigger the DOM to cycle trough the longer it needs. So to improve performance, may start with a parent element that contains the searched one for shure e.g find(document.getElementById("parent"))

If you know the class of the parent element, you can do this:

var elems=[...document.getElementsByClassName("style16")];
var elem=false;
var found=elems.some(function(el){
     if(el.parentNode.childNodes[1].innerHTML=="TD"){
         elem=el.parentNode.childNodes[1];
         return true;//kill execution
     }
});
if(found){
   console.log(elem);
}else{
   alert("not found");
}

Answer 2

You can loop through all the elements of the same class like this in jQuery:

$('.style16').each(function(i, obj) {
    var innerHTML = $(this).next().text();//next returns the next 'td' sibling
});

This way you can track all the innerHTML elements you are looking for.