动态创建和删除 div答案

【问题标题】：Dynamicaly creating and removing a div动态创建和删除 div
【发布时间】：2012-05-08 21:54:09
【问题描述】：

我已经为此苦苦挣扎了一段时间，我相信对此有一个简单的答案。发生的事情是我删除了一个名为“付款”的 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 为空源文件： http://itsuite.it.brighton.ac.uk/ks339/sem2/javascript/js.js线：76

希望有人可以对此提供一些见解，如果我完全离开，请告诉我！

谢谢

编辑：清除 div 比删除它更容易，我该怎么做？

【问题讨论】：

为什么要完全删除div？为什么不把它清除然后塞进去呢？
@Eonasdan 我不知道你在哪里可以做到这一点？你会怎么做呢？
你是如何调用你的函数的？顺序是什么？我认为您在获取 id 之前删除了 div。
@Th0rndike 这是当前订单 ` clearPage();创建支付（）；打印页面（）； `
那么问题就是内特所说的

标签： javascript html css dom dynamic

【解决方案1】：

在 create_payment() 中，您将 ID 设置为“我的”。不应该是“支付”吗？

【讨论】：

-_- 非常感谢，我知道这很明显。 + 回答并被选为最佳（当我可以时）

【解决方案2】：

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

尝试将您的代码切换到 jquery 中，这对您和我来说会更简洁、更容易理解。

【讨论】：

抱歉，这很难解释。但是，感谢 Nate，我还没有解决这个问题。无论如何谢谢:)

【解决方案3】：

您的问题是在 createPayment() 中您将 id 设置为“我的”：

payment.id = "mine";

稍后在 printOnPage() 中，您正在使用 id 'payment' 查找元素：

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

【讨论】：

【解决方案4】：

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

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

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

希望你能找到解决办法！祝你好运！

【讨论】：