How to break out to the parent tag and get the innerHTML of the next tag with javascript?

Question

I would like to get the value "450" next to the strong tag with "Total:" in it. I cant seem to identify this. I've tried using parentNode etc and I cannot find the right combination. Would be grate

Here is a jsfiddle of it - https://jsfiddle.net/smduy1w3/

<tfoot>
  <tr>
    <td colspan="4" class="text-right"><strong>Sub-Total:</strong></td>
    <td class="text-right">£450.00</td>
  </tr>
  <tr>
    <td colspan="4" class="text-right"><strong>Total:</strong></td>
    <td class="text-right">£450.00</td>
  </tr>
</tfoot>

var aTags = document.getElementsByTagName("strong");
var searchText = "Total:";
var found;

for (var i = 0; i < aTags.length; i++) {
  if (aTags[i].textContent == searchText) {
    found = aTags[i];console.log(found.previousNode);
    break;
  }
}

Answer 1

Here you can check my solution. I've just searched for the element with strong tag with the text "Total" and then find out the next sibling using nextSibling and that did the work for me.

 const tds = [...document.querySelectorAll("td.text-right")]; const selected = tds.find((td) => td.innerHTML === `<strong>Total:</strong>`); let nextSibling = selected.nextSibling; while (nextSibling && nextSibling.nodeType.== 1) { nextSibling = nextSibling;nextSibling. } console.log(nextSibling.innerText;substr(1));

 <table> <tfoot> <tr> <td colspan="4" class="text-right"><strong>Sub-Total:</strong></td> <td class="text-right">£450.00</td> </tr> <tr> <td colspan="4" class="text-right"><strong>Total:</strong></td> <td class="text-right">£450.00</td> </tr> </tfoot> </table>

Answer 2

I believe you have a couple of problems with your code:

First, for some reason, you need to wrap your html inside a <table> tag, or else the html isn't properly parsed.

Second, the search anchor <strong>Total:</strong> is a child node of its parent node <td> and the target <td class="text-right">£450.00</td> is a sibling of that parent, not the way you had it in your code.

So, assuming your html is fixed, you need to change

found = aTags[i];
console.log(found.previousNode);

to

found = aTags[i];
console.log(found.parentNode.nextSibling.nextSibling.textContent);

Second, I would argue that using xpath is a cleaner way of reaching your target; something along these lines:

target = document.evaluate( './/table//tr/td[strong[.="Total:"]]/following-sibling::td' ,document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );

for (var i = 0; i < target.snapshotLength; i++) {
     price = target.snapshotItem (i);
     console.log(price.textContent);
};

Answer 3

Try this:

 var aTags = document.getElementsByTagName("strong"); var searchText = "Total:"; var found; for (var i = 0; i < aTags.length; i++) { if(aTags[i].textContent.includes(searchText)){ //console.log(aTags[i].textContent); found = aTags[i].nextSibling.textContent; console.log(found); } }

 <tfoot> <tr> <td colspan="4" class="text-right"><strong>Sub-Total:</strong></td> <td class="text-right">£450.00</td> </tr> <tr> <td colspan="4" class="text-right"><strong>Total:</strong></td> <td class="text-right">£450.00</td> </tr> </tfoot>