Question

我已经对此持续了一段时间，我相信这有一个简单的答案。会发生什么，我删除一个名为“付款”的div然后再动态创建它，以便我可以添加它。然后重复，因为需要添加的信息会发生变化。

到目前为止，我一直在努力解决这个问题。

function clearPage()
{
    var d = document.getElementById("contain"); 
    var d_nested = document.getElementById("payment"); 
    var deleteNode = d.removeChild(d_nested);

}

function createPayment()
{
    payment = document.createElement("div");
    payment.id = "mine";
    document.getElementById("contain").appendChild(payment);
}

function printOnPage()
{
    var x = names.length;
    for( var i = 0 ; i < x ; i++ )
    {
        var para = document.createElement("p");
        var paymentDiv = document.getElementById("payment");
        paymentDiv.appendChild(para);
        var txtName = document.createTextNode("Item: ");
        para.appendChild(txtName);
        var txtNameArray = document.createTextNode(names[i]);
        para.appendChild(txtNameArray);
        var txtQty = document.createTextNode(" Qty: ");
        para.appendChild(txtQty);
        var txtQtyArray = document.createTextNode(qty[i]);
        para.appendChild(txtQtyArray);
        var txtCost = document.createTextNode(" Cost: ");
        para.appendChild(txtCost);
        var txtCostArray = document.createTextNode(prices[i]);
        para.appendChild(txtCostArray);
    }
}

相关HTML

<div id="contain">
    <p>Payment</p>
        <div id="payment">  
            <br />
        </div>
</div>

它需要我的CSS规则的付款ID以及我创建的文本。

这是我在FireFox中遇到的错误

错误：paymentDiv为null源文件： http://itsuite.it.brighton.ac.uk/ks339/sem2/javascript/js.js行：76

希望有人可以提供一些见解，请告诉我，如果我完全关闭！

由于

编辑：清除div而不是删除它是否容易，我将如何做这样的事情？

Answer 1

在create_payment（）中，您将ID设置为“mine”。不应该是“付款”吗？

Answer 2

我不太了解你的要求，但无论如何你不能使用相同的id属性在页面中创建多个项目，如果你想复制一个项目并且仍然可以控制它，你应该使用类来代替。 / p>

尝试将代码切换到jquery，它会更清晰，更易于理解。我

Answer 3

你的问题是在createPayment（）中你将id设置为'mine'：

payment.id = "mine";

稍后在printOnPage（）中你正在寻找使用id“payment”的元素：

var paymentDiv = document.getElementById("payment");

Answer 4

正如您在编辑中提到的那样，清除div比删除它要容易得多，特别是如果您以后仍然需要它。

要清除DIV块，只需将其内容设置为为空：

document.getElementById('payment').innerHTML = "";

我希望你找到解决方案！祝你好运！

动态创建和删除div

4 个答案: