DOM的innerHTML重複問題

Question

function SwapPlans(city, id) { 
    var tp = GetTravelPlanById(id); 
    var content = MakeHTMLAccordionMe(tp.items[0]); 

    document.getElementById(city).innerHTML = " "; 
    document.getElementById(city).innerHTML = content.innerHTML; 
    document.getElementById(city).outerHTML = " "; 
    document.getElementById(city).outerHTML = content.outerHTML; 
} 

嗨，

我上面的代碼片段的一個問題。 MakeAccordionME函數返回 我想通過document.getElementById（city）= value更改的內容;但它不會刪除第一個div的第一個內容。

DOM javascript中有沒有content.clear方法？

thx

p.s.從document.getElementById（city）返回的div是一個jQuery手風琴div。

Answer 1

在DOM中（由瀏覽器實現，innerHTML在HTML5之前並不是標準的，但由所有人實現）設置元素的innerHTML將刪除它的所有內容。 innerHTML和outerHTML之間的區別在於，對於outerHTML，標籤本身是包含在內的。 OuterHTML因此可以用來替換標籤。由於內容是類型元素，您不希望使用innerHTML，所以您需要將其附加到涉及的dom元素。

這可能會實現：

function SwapPlans(city, id) { 
    var tp = GetTravelPlanById(id); 
    var content = MakeHTMLAccordionMe(tp.items[0]); 
    var city = document.getElementById(city); 

    // Remove all children of the div 
    while (city.hasChildNodes()) { 
     city.removeChild(city.children.item(0)); 
    } 

    // Add a child to the city, making sure that it belongs to this document. Instead 
    // of blind importing you might also check it's ownership. 
    city.appendChild(city.ownerDocument.importNode(content))