Динамическое поле выбора и динамический DIV, установите элемент вместо удаления / добавления - PullRequest
Новая
       13

Динамическое поле выбора и динамический DIV, установите элемент вместо удаления / добавления

2 голосов
/ 02 июня 2009

Я создаю динамическое поле выбора, при изменении текстовый раздел будет заполняться данными. Я предпочел бы иметь набор данных для некоторого текста, а не для добавления.

Например:

Эта функция вызывается при изменении поля выбора: 

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

////

При таком подходе предполагается, что я добавляю в раздел. Есть ли способ, которым я могу просто УСТАНОВИТЬ ребенка? Я думаю, я мог бы удалить ребенка, а затем установить его. Но я полагаю, что это потратило бы впустую ресурсы.

1 Ответ

1 голос
/ 02 июня 2009

Если вы хотите установить сразу весь 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);
}
...