.appendChild函数的替代方案

Question

我正在为一个正在处理的项目使用appendChild函数。

此函数在jQuery UI选项卡中使用，但是每次单击选项卡时，选项卡中的内容都会被复制。

我真的不希望内容被复制，我已经尝试了所有方法来解决这个问题。

我希望有人能帮上忙。

非常感谢！

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，因此可以这样做：

$("#tabs-2").html(resultDocument)；

Answer 2

你在IE条件下使用innerHTML，有没有什么原因你不在Chrome / Firefox/Opera条件下使用它？

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