альтернатива для .appendChild function

Question

Я использую функцию appendChild для проекта, над которым я работаю.

Эта функция используется на вкладках пользовательского интерфейса jQuery, однако каждый раз, когда нажимается вкладка, содержимое внутри вкладок дублируется.

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

Надеюсь, вам кто-то поможет.

Большое спасибо!

JQuery

function loadXMLDocTues() 
    { 
    xml = loadXMLDoc("./xml/tuesday.xml"); 
    xsl = loadXMLDoc("./xml/tv_guide.xsl"); 
    // code for IE 
    if (window.ActiveXObject || xhttp.responseType == "msxml-document") 
     { 
     ex = xml.transformNode(xsl); 
     document.getElementById("tabs-2").innerHTML = ex; 
     } 
    // code for Chrome, Firefox, Opera, etc. 
    else if (document.implementation && document.implementation.createDocument) 
     { 
     xsltProcessor = new XSLTProcessor(); 
     xsltProcessor.importStylesheet(xsl); 
     resultDocument = xsltProcessor.transformToFragment(xml, document); 
     document.getElementById("tabs-2").appendChild(resultDocument); 
     } 
    } 

HTML

  <div id="tabs"> 
       <ul> 
        <li><a href="#tabs-1" onclick="loadXMLDocMon()">Monday</a></li> 
        <li><a href="#tabs-2" onclick="loadXMLDocTues()">Tuesday</a></li> 
        <li><a href="#tabs-3" onclick="loadXMLDocWed()">Wednesday</a></li> 
        <li><a href="#tabs-4" onclick="loadXMLDocThurs()">Thursday</a></li> 
        <li><a href="#tabs-5" onclick="loadXMLDocFri()">Friday</a></li> 
        <li><a href="#tabs-6" onclick="loadXMLDocSat()">Saturday</a></li> 
        <li><a href="#tabs-7" onclick="loadXMLDocSun()">Sunday</a></li> 
       </ul> 

       <div id="tabs-1"> 
       </div> 
       <!--CLOSING TABS-1 DIV--> 

       <div id="tabs-2"> 
       </div> 
       <!--CLOSING TABS-2 DIV--> 

       <div id="tabs-3"> 
       </div> 
       <!--CLOSING TABS-3 DIV--> 

       <div id="tabs-4"> 
       </div> 
       <!--CLOSING TABS-4 DIV--> 

       <div id="tabs-5"> 
       </div> 
       <!--CLOSING TABS-5 DIV--> 

       <div id="tabs-6"> 
       </div> 
       <!--CLOSING TABS-6 DIV--> 

       <div id="tabs-7"> 
       </div> 
       <!--CLOSING TABS-7 DIV--> 
      </div> 

Answer 1

AppendChild делает именно то, что следует из названия и добавляет. , если вы хотите заменить, что вы хотите, судя по вашему конкретному коду IE, тогда вам нужно использовать innerHTML

document.getElementById ("tabs-2"). InnerHTML = resultDocument;

еще лучше, так как вы используете JQuery вы можете сделать это:

$ ("# ушки-2") HTML (resultDocument);.

Answer 2

Вы используете innerHTML для условия IE, есть причина, по которой вы не используете его для условий Chrome/Firefox/Opera?

document.getElementById("tabs-2").innerHTML = resultDocument;