Get the last occurrence of an element

Question

getElementById(id) returns the element with the matching ID attribute. How can I get the last occurrence of this element, as opposed to the first?

<!DOCTYPE html>
<html>
<body>

<button onclick="getLast()">Click me</button>

<div id="username">Lisa</div>
<div id="username">Chris</div>

<script>
function getLast() {
    alert(document.getElementById("username").innerHTML);
}
</script>

</body>
</html>

score 4 · Accepted Answer · edited Oct 14 '17 at 08:40

id is always unique. No two DOM elements can have the same id. In your case use the class attribute. Use getElementsByClassName which will return a collection. Get its length and use that value to get the last element.

function getLast() {
  var getLastElemIndex = document.getElementsByClassName("username").length - 1;
  console.log(getLastElemIndex)
  alert(document.getElementsByClassName("username")[getLastElemIndex].innerHTML);
}

<div class="username">Lisa</div>
<div class="username">Chris</div>
<button onclick="getLast()">Click me</button>

score 3 · Answer 2 · answered Oct 14 '17 at 06:52

id should be unique. But we don't have control on how people write their code and I also meet this case sometimes: "I need to parse the page and they are using same id"

You can treat id as an attribute and use querySelectorAll:

<button onclick="getLast()">Click me</button>
<div id="username">Lisa</div>
<div id="username">Chris</div>
<script>
function getLast() {
    tags = document.querySelectorAll('[id="username"]');
    alert(tags[tags.length - 1].innerHTML);
}
</script>

And the best practice should be using class.

tags[tags.length - 1] is the better answer – bysanchy Oct 28 '18 at 20:48 — bysanchy, Oct 28 '18 at 20:48

score 1 · Answer 3 · answered Oct 14 '17 at 06:42

The id of a HTML element is meant to be unique. You should specify the class instead:

<div class="username">Lisa</div>
<div class="username">Chris</div>

Then use Document.getElementsByClassName() to get all elements of that class:

var usernames = document.getElementsByClassName("username");

Alternatively, you can use Document.querySelectorAll():

var usernames = document.querySelectorAll(".username");

And then you can get the last one:

var lastUsername = usernames[usernames.length - 1];

score 1 · Answer 4 · answered Oct 14 '17 at 06:54

Even you can do it by tag name div, as @brk said id must be unique.

function getLast(){
  var divs = document.querySelectorAll("div");
  console.log(divs[divs.length - 1].textContent);
}
getLast();

<button onclick="getLast()">Click me</button>
<div>Lisa</div>
<div>Chris</div>

Get the last occurrence of an element

4 Answers4