How can I change <p> tag data dynamically after some defined time delay using javascript?

Question

I want to change only <p> tag contents using javascript after a defined time delay. For example a

<p>messages</p>

should change depending on the no. of new messages came. As

<p>messages(1)</p>
<p>messages(2)</p>

Answer 1

Write your <p> as:

<p class="messages">messages</p>

Your javascript:

function updateMessages() {
    var ps = document.getElementsByClassName("messages");
    for(var i = 0, len = ps.length; i < len; i++) {
        ps[i].innerHTML = "messages (" + messageCount + ")";
    }
}

setTimeout(updateMessages, 1000);

Where 1000 is the number of milliseconds to delay.

Or if you want to do it periodically every 15 seconds, you can use setInterval:

setInterval(updateMessages, 15000);

UPDATE:

I see your comment above:

new messages are retrieved from the database using a JSP function that checks database for new messages

In that case, I gather you want to retrieve that periodically, in effect polling that URL? If you already use a javascript framework, I suggest you look at their AJAX documentation.

Answer 2

$(document).ready({
 function updatePara() {        
      $('p').html('Content to set in para');
    }
 });

setTimeout(updatePara, no.of milisecond to delay);

jQuery make dom manipulation much easy :) The above code changes content of all the paragraph, So better to give the desired paragragh <p></p> some call name then filter the para to update with those name i.e $('p.classname').html('your content') OR $('.classname').html('Your content')
jQuery is AWESOME !!! :)

Answer 3

You can use setTimeout function:

var delay = 1000; // 1 second
setTimeout(function() {
  var pNodes = document.getElementsByTagName('p');
  for (var i=0, length=pNodes.length; i < length; i++) {
    pNodes[i].innerHTML = pNodes[i].innerHTML+"("+ (i+1) +")";
  }
}, delay);

getElementsByTagName is used just for example. The way of retrieving pNodes depends on structure of your html code.