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

嗨，

我对上面的 sn-p 有疑问。 MakeAccordionME 函数返回的内容 我想通过 document.getElementById(city) = value; 进行更改但它不会删除第一个 div 的第一个内容。

DOM javascript 中有 content.clear 方法吗？

谢谢

附言从 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))