Question

我想在倒计时到达0时关闭并创建一个新的div。我的div看起来像这样

<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>

这是倒计时

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);
}

所以当时间结束时，它将使用jQuery淡出div。然后我想创建一个新的div。我用这个：

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');
}

但是这会在页面底部创建一个div，我想要一个新的与div淡出的位置相同的位置。我需要改变什么？

Answer 1

您是否尝试了jQuery的replaceWith？

Answer 2

这很简单：

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

Answer 3

您的代码中根本没有使用jQuery。您犯的错误是您不替换节点，而是在其后添加新节点。您要查找的功能是replaceChild。

node.replaceChild(oldNode, newNode)

Answer 4

如果你想用div 3替换div 2

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

你可以使用

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

或者您可以使用

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

Answer 5

你说“使用jQuery”，但你似乎没有使用jQuery。

如果你真的在使用/打算开始使用jQuery，那么Rahul's answer就是你想要的。

如果没有，那么您正在寻找parentNode，insertBefore和removeChild，例如：

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

将旧div插入旧div之前，然后删除旧div。

所以也许：

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');
}

...然后用旧ID和新ID调用它。

作为旁注：您不必将setAttribute用于id。它是元素实例上的反射属性。

如何用新的div替换旧的div？

5 个答案: