I have div element with dynamic Id.

<div id="parent">
    <div id="elmn1"></div>
    <div id="id-has-changed"></div>
    <div id="elmn3"></div>
    <div id="elmn4"></div>
    <div id="id-has-changed-by-user-from-input-field"></div>
</div>

All element id (except #parent) are editable by user from an input field, so the last child of #parent may has new id set by user.

I want to check the element with the highest number (4) at the last part of their id and I want to append a new element with the next id.

var nextId = "elmn" + (numberOfLastElement + 1);
var newElmn = document.createElement("div");

newElmn.id = nextId;
document.getElementById("parent").appendChild(newElmn);

In this paricular case the new element will has id="elmn5".

My question is, how to get numberOfLastElement?

I have div element with dynamic Id.

<div id="parent">
    <div id="elmn1"></div>
    <div id="id-has-changed"></div>
    <div id="elmn3"></div>
    <div id="elmn4"></div>
    <div id="id-has-changed-by-user-from-input-field"></div>
</div>

All element id (except #parent) are editable by user from an input field, so the last child of #parent may has new id set by user.

I want to check the element with the highest number (4) at the last part of their id and I want to append a new element with the next id.

var nextId = "elmn" + (numberOfLastElement + 1);
var newElmn = document.createElement("div");

newElmn.id = nextId;
document.getElementById("parent").appendChild(newElmn);

In this paricular case the new element will has id="elmn5".

My question is, how to get numberOfLastElement?

• javascript
• jquery

• Is the hightest number always the last element that starts with this id? If not, you will have to loop through all elements to find the hightest id – Jerodev Commented Oct 3, 2014 at 14:29
• if its always the last one, you just have to append to your div parent – starvator Commented Oct 3, 2014 at 14:32
• No, user can changes any id from input field, so the last element can has new id set by user. – Agus Putra Dana Commented Oct 3, 2014 at 14:38
• Fixed my answer. It's still more limited than the excepted one. So I'm leaving it here just as a syntax alternative. – PM 77-1 Commented Oct 3, 2014 at 16:17

3 Answers 3

Updated

Final version of Fiddle

var myEl = document.getElementById('parent').children;
var highest = null;
var idName= null;

if (myEl){

for (var ii=0;ii<myEl.length;ii++){
     
     var temp = myEl[ii].getAttribute('id');
    
    
    var intval = temp.match(/\d+/g)
     
    
    if (intval !=null){
        
        if(intval>highest){
            
         
            highest = intval;
            idName = temp;
        }
        
        
    }
  

  }

}

console.log(idName);

Leaving the code below for historical info

Here is a working JSFiddle.

var myEl = document.getElementById('parent').children;
var count = 0;
      if (myEl) {
            var match = 'elmn';
            for (var ii = 0; ii < myEl.length; ii++) {
                var temp = myEl[ii].getAttribute('id');
                if (temp.indexOf(match) == 0) {
                    count++
                }
            }
        }
        alert('count is ' + count);

Here is the logic:

Get all the elements what have id="elmnx" where x=1,2, etc. $("[id*='elmn']")

Get the last of them. last()

Get its id.attr('id')

Substring to get the number at the end. substring(4)

Make it an int so that you can add +1. parseInt()

Try:

var numberOfLastElement=parseInt($("[id*='elmn']").last().attr('id').substring(4));

Something like this, assuming elmn prefix in all applicable IDs:

function MaxElemNo() {
  var prefix = "elmn";
  var parent = document.getElementById("parent");
  var elements = parent.querySelectorAll("[id^='"+ prefix + "']");
  var lastElemNo = 0;
  for (var i=0; i<elements.length; i++) {
     var el = elements[i].id;
     var num = + el.substring(prefix.length, el.length);
     lastElemNo = Math.max(lastElemNo, num) 
  }
  return lastElemNo;  
}    
console.log(MaxElemNo());

JS Fiddle