Select the last element of a Div using jQuery not working

Question

I'm trying to get the value of last <h4> element of a div. I have tried with all the solution I found on web but nothing is working here.

<div id="mdiv">
    <div id="example">
         <h4> </h4>
    </div>
<div>

and JQuery

 var texter = '<h4>' + message + '</h4>' + '<br/>';
 $('#example').append(texter);
 //not working
 alert($('#example').children().last().text());

 //Not working
 //$('#example h4:last').val();
 //not working
 //$('#example h4:last-child').val();

as you see above I tried 3 approch including commented code but nothing is working for me. What should I do to get the newly added <h4> ?

Answer 1

The :last selector is sufficient:

$('#example h4:last').text()

Here's a working example:

 let texter = '<h4>' + "test" + '</h4>' + '<br/>'; $('#example').append(texter); alert($('#example h4:last').text()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mdiv"> <div id="example"> <h4> </h4> </div> <div> 

Answer 2

You should do like so :

alert($('#example h4').last().text());

There you will catch the last h4. With your code you'r trying to get the last div#example .