Last Son of Element Chain

jQuery can help you with .last ()

alert($("span:last").html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <span>teste1
        <span>teste2
             <span>teste3</span>
        </span>
      </span>
    </td>
  </tr>
</table>

For now there is no direct native way to get the element inside containers "nested" . For now you can have a consumable method:

(I'll warn you that I will not implement this method within HTMLElement# for two reasons:

• Not all browsers have this interface HTMLElement ;
• can be problematic with libraries

)

Example to work across multiple browsers. Note: You may notice that I used #childNodes instead of #children , some old browsers do not support #children .

var castCollection,
    findLastNestedContainer;

findLastNestedContainer = function(container) {
    var child;
    for (; child = castCollection(container.childNodes)[0];)
        container = child;
    return container;
};

castCollection = function(collection) {
    var revised = [];
    var i, len, node;

    i = 0;
    len = collection.length;

    for (; i < len; ++i) {
        node = collection[i];
        if ((typeof node.nodeValue) !== "string")
            revised.push(node);
    }

    return revised;
};

Now finally the explanation goes:

• findLastNestedContainer takes an HTML container and continuously checks the first child element that the current container has, until no HTML element appears within it, finally returns the last container checked.

Example usage:

findLastNestedContainer(elementoHTML)

This function will allow you to directly capture a (first) element inside nested containers, not just inside an element.

If you want to get the last element inside (one or more) HTML elements, simply modify the condition inside the for loop in the findLastNestedContainer function block, to get the last element of the current container's child collection :

// Eu sei que poderia ter sido usado Array#last,
// mas nem todos navegadores suportam o getter
for (; (child = castCollection(container.childNodes))[child.length - 1];)
    container = child;

You can use the following code

var list = document.getElementById("list").lastChild.innerHTML;
document.getElementById("demo").innerHTML = list;

And in your HTML

<ul id="list">
    <li>StackOverflow</li>
    <li>mauro</li>
</ul>

<div id="demo"></div>

The return will be mauro

You can fetch the element from the class.

var containers = document.querySelectorAll(".container");
[].forEach.call(containers, function (container, indice) {
  var teste = container.querySelector(".teste");
  teste.textContent = "Teste " + indice;
});

<div class="container">
  <div>
    <div>
      <div>
        <div class="teste">

        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div>
    <div>
      <div>
        <div class="teste">

        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div>
    <div>
      <div>
        <div class="teste">

        </div>
      </div>
    </div>
  </div>
</div>