I want to close and create a new div when the countdown hits 0. My div looks like this

<div id="bij2">Test
    <div id="bij2Blauw">
        <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3" class="titel">Resterende tijd</td>
            </tr>
            <tr>
                <td height="25" colspan="3" align="center" valign="middle">
                    <input id="aktie2" type="text" class="countdownTekst" size="27" readonly="readonly">
                    <script language="javascript">
                        countdown(2012, 7, 29, 'aktie2', 'bij2')
                    </script>
                </td>
            </tr>
            <tr>
                <td height="60">
                    <input name="kopen1" type="submit" class="kopen" id="kopen1" value="Koop nu"
                    />
                </td>
                <td height="60" colspan="2" align="right" valign="bottom">
                    <span class="euro">&#8364;</span>
                    <span class="prijs">14,95</span>
                </td>
            </tr>
        </table>
    </div>
</div>

This is the countdown

function countdown(yr, m, d, idCountdown, divId) {
    var theyear = yr;
    var themonth = m;
    var theday = d;
    var today = new Date();
    var todayy = today.getYear();
    if (todayy < 1000) todayy += 1900
    var todaym = today.getMonth();
    var todayd = today.getDate();
    var todayh = today.getHours();
    var todaymin = today.getMinutes();
    var todaysec = today.getSeconds();
    var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
    var futurestring = montharray[m - 1] + " " + d + ", " + yr;
    var dd = Date.parse(futurestring) - Date.parse(todaystring);
    var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
    var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
    var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
    var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
    var dag = "dagen";

    if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) {
        document.getElementById(idCountdown).value = "voorbij";
        $(document.getElementById(divId)).fadeOut(2000);
        //removeElements(document.getElementById(divId));
        setTimeout("creatediv(document.getElementById(divId))", 3000);
        return;
    } else if (dday <= 1) {
        dag = 'dag';
    }
    document.getElementById(idCountdown).value = dday + ' ' + dag + ' ' + dhour + " uur " + dmin + " min " + dsec + " sec";
    setTimeout(function () {
        countdown(theyear, themonth, theday, idCountdown);
    }, 1000);
}

So when the time is over it will fade out the div using jQuery. Then i want to create a new div. I use this:

function creatediv(id) {

    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    newdiv.className = 'newclass';
    newdiv.style.float = "left";
    newdiv.innerHTML = "nothing";

    document.body.appendChild(newdiv);
    alert(id + 'gemaakt');
}

But this creates a div at the bottom of the page and i want a new one at the same position as the div that fades out. What do i need to change?

I want to close and create a new div when the countdown hits 0. My div looks like this

<div id="bij2">Test
    <div id="bij2Blauw">
        <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3" class="titel">Resterende tijd</td>
            </tr>
            <tr>
                <td height="25" colspan="3" align="center" valign="middle">
                    <input id="aktie2" type="text" class="countdownTekst" size="27" readonly="readonly">
                    <script language="javascript">
                        countdown(2012, 7, 29, 'aktie2', 'bij2')
                    </script>
                </td>
            </tr>
            <tr>
                <td height="60">
                    <input name="kopen1" type="submit" class="kopen" id="kopen1" value="Koop nu"
                    />
                </td>
                <td height="60" colspan="2" align="right" valign="bottom">
                    <span class="euro">&#8364;</span>
                    <span class="prijs">14,95</span>
                </td>
            </tr>
        </table>
    </div>
</div>

This is the countdown

function countdown(yr, m, d, idCountdown, divId) {
    var theyear = yr;
    var themonth = m;
    var theday = d;
    var today = new Date();
    var todayy = today.getYear();
    if (todayy < 1000) todayy += 1900
    var todaym = today.getMonth();
    var todayd = today.getDate();
    var todayh = today.getHours();
    var todaymin = today.getMinutes();
    var todaysec = today.getSeconds();
    var todaystring = montharray[todaym] + " " + todayd + ", " + todayy + " " + todayh + ":" + todaymin + ":" + todaysec;
    var futurestring = montharray[m - 1] + " " + d + ", " + yr;
    var dd = Date.parse(futurestring) - Date.parse(todaystring);
    var dday = Math.floor(dd / (60 * 60 * 1000 * 24) * 1);
    var dhour = Math.floor((dd % (60 * 60 * 1000 * 24)) / (60 * 60 * 1000) * 1);
    var dmin = Math.floor(((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) / (60 * 1000) * 1);
    var dsec = Math.floor((((dd % (60 * 60 * 1000 * 24)) % (60 * 60 * 1000)) % (60 * 1000)) / 1000 * 1);
    var dag = "dagen";

    if (dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 0) {
        document.getElementById(idCountdown).value = "voorbij";
        $(document.getElementById(divId)).fadeOut(2000);
        //removeElements(document.getElementById(divId));
        setTimeout("creatediv(document.getElementById(divId))", 3000);
        return;
    } else if (dday <= 1) {
        dag = 'dag';
    }
    document.getElementById(idCountdown).value = dday + ' ' + dag + ' ' + dhour + " uur " + dmin + " min " + dsec + " sec";
    setTimeout(function () {
        countdown(theyear, themonth, theday, idCountdown);
    }, 1000);
}

So when the time is over it will fade out the div using jQuery. Then i want to create a new div. I use this:

function creatediv(id) {

    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', id);
    newdiv.className = 'newclass';
    newdiv.style.float = "left";
    newdiv.innerHTML = "nothing";

    document.body.appendChild(newdiv);
    alert(id + 'gemaakt');
}

But this creates a div at the bottom of the page and i want a new one at the same position as the div that fades out. What do i need to change?

• javascript
• html

• Please remove jQuery from your tags – Sem Commented Jul 26, 2012 at 11:24
• But if you're going to be using jQuery anyway, there's simpler ways to select the DIV you want and to create the new one... – Scott Sauyet Commented Jul 26, 2012 at 11:27
• @Sem: He says he intends using jQuery in the text, so... – T.J. Crowder Commented Jul 26, 2012 at 11:29
• 2 If your using document.createElement your not using jQuery at all. – Sem Commented Jul 26, 2012 at 11:34
• 1 As well as document.getElementById("id") w/ jQuery this is just $("#id") etc. – Sphvn Commented Jul 26, 2012 at 11:35

5 Answers 5

Have you tried the replaceWith of jQuery?

It's really simple:

$('#bij2').replaceWith( newcontent );

You are not using jQuery at all in your code. The error you make is that you don't replace the node but rather append the new one after it. The function you are looking for is replaceChild.

node.replaceChild(oldNode, newNode)

If you wan to replace div 2 with suppose a div 3

<div id="1"><div id = "2"></div></div>

you can use

$("#1").html('<div id="3"></div>')

or you can use

$("#2").replaceWith('<div id="3"></div>')

You've said "using jQuery," but you don't seem to be using jQuery.

If you really are using / intend to start using jQuery, then Rahul's answer is what you want.

If not, then you're looking for parentNode, insertBefore, and removeChild, e.g.:

// Assuming olddiv refers to the old div
var parent = olddiv.parentNode;
parent.insertBefore(newdiv, olddiv);
parent.removeChild(olddiv);

That inserts the new div in front of the old one, then removes the old one.

So perhaps:

function replacediv(oldid, id) {

    var newdiv = document.createElement('div');
    newdiv.id = typeof id !== "undefined" ? id : oldid; // Use old ID if no new one specified
    newdiv.className = 'newclass';
    newdiv.style.float = "left";
    newdiv.innerHTML = "nothing";

    var olddiv = document.getElementById(oldid);
    var parent = olddiv.parentNode;
    parent.insertBefore(newdiv, olddiv);
    parent.removeChild(olddiv);
    alert(id + 'gemaakt');
}

...and then call it with the old ID and the new one.

As a side note: You don't have to use setAttribute for id. It's a reflected property on the element instance.