動態選擇框和動態DIV，將元素設置為相對於刪除/追加

Question

我正在創建一個動態選擇框，更改時，文本部分將填充數據。 我寧願將數據設置為某些文本，而不是追加。

例如：

更改選擇框時將調用此函數：

function createDetails(...) {

    var details = document.getElementById("detailsDIV");
    var docFragment = document.createDocumentFragment();
    containerDiv = document.createElement("div");

    // Create five div sections with the text for the details section
    var nameTextNode    = createTextDivSect(nameStr);
    var phoneTextNode   = createTextDivSect("Phone:  " + phoneStr);
    var faxTextNode     = createTextDivSect("Fax:    " + faxStr);
    var websiteTextNode = createTextDivSect("Website: " + websiteStr);
    var emailTextNode   = createTextDivSect("Email: " + emailStr);

    // Append the text sections to the container DIV
    containerDiv.appendChild(nameTextNode);
    containerDiv.appendChild(phoneTextNode);
    containerDiv.appendChild(faxTextNode);

    // Add the container div to the doc fragment
    docFragment.appendChild(containerDiv);
    // Add the doc fragment to the div
    details.appendChild(docFragment);
}

////

通過這種方法，假設我要附加到一節。 有沒有辦法我可以讓孩子坐下來。 我想我可以刪除孩子，然后設置它。 但是我認為那會浪費資源。

Answer 1

如果您想一次設置整個div而不使用innerHTML，則可以使用replaceChild() ：

function createDetails(...) {

    var details = document.getElementById("detailsDIV");
    var docFragment = document.createDocumentFragment();

    // Process docFragment here...

    var parentNode = details.parentNode;
    parentNode.replaceChild(docFragment, details);
}