试图创建一个运行脚本的按钮，但是 H1 和按钮消失 onClick答案

【问题标题】：attempting to create a button which runs a script however the H1 and button disappear onClick试图创建一个运行脚本的按钮，但是 H1 和按钮消失 onClick
【发布时间】：2012-11-28 00:58:04
【问题描述】：

我希望你能阅读我的代码，我的本地主机上有一个 XML 文件，我希望它从该文件中提取标题和年份（它目前有标题、年份、艺术家、价格和国家），同时维护页面上的 H1 和按钮。

H1 文本和按钮在单击时消失，我希望它与结果保持在同一页面上。

  <h1>Show the Album list</h1>  
   <script>  
   xmlhttp=new XMLHttpRequest();  

   xmlhttp.open("GET","cd_catalog.xml",false);  
   xmlhttp.send();  
   xmlDoc=xmlhttp.responseXML;  
   function CdCatalog()  
    {
       document.write("<table border='1'><th>TITLE</th><th>YEAR</th>");
       var x=xmlDoc.getElementsByTagName("CD");  
       for (i=0;i<x.length;i++)
    {
   document.write("<tr><td>");
   document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
   document.write("</td><td>");
   document.write(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
   document.write("</td></tr>");
    }
       document.write("</table>");
    }
   </script>

【问题讨论】：

new XMLHttpRequest()
不要使用document.write，你应该使用document.body.innerHTML += "<td>blah</td>"
谢谢 Derek，我还没学过，但我会看看一些教程。
你可以看看my demo。这并不难理解。

标签： javascript xml xmlhttprequest

【解决方案1】：

问题是您将document.write 用于按钮的单击事件，这是在文档关闭之后...这意味着它会覆盖所有内容。由于您的页面很简单并且只有一个 <h1> 和按钮，因此看起来只有那些东西被隐藏了，但它会是页面上的所有内容（如果您有更多的话）。

解决方案是使用.appendChild 和/或.innerHTML 动态添加内容。我会在一分钟内提供解决方案:)

更新：

由于您使用的是表格，因此您不妨使用本机方法.insertRow 和.insertCell，这使得表格创建更加容易。以下是您可以整体使用的示例：

function CdCatalog(xmlDoc) {
    var table = document.createElement("table");
    var thead = table.createTHead();    // Where "header" rows go
    // `insertRow` creates a <tr> element and appends it to `thead` automatically, returning the element
    var tr = thead.insertRow(-1);
    var td = document.createElement("th");  // No special method for creating "th" elements
    td.innerHTML = "TITLE";  // Set its inner content
    tr.appendChild(th);  // Add it to the row (which is in the header)
    td = document.createElement("td");
    td.innerHTML = "YEAR";
    tr.appendChild(td);

    var x = xmlDoc.getElementsByTagName("CD");
    // "tbody" is where a table's content goes, whether you do this explicitly or not
    var tbody = table.tBodies[0];
    for (var i = 0; i < x.length; i++) {
        tr = tbody.insertRow(-1);
        // `insertCell` creates a <td> element and appends it to `tr` automatically, returning the element
        td = tr.insertCell(-1);
        td.innerHTML = x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
        td = tr.insertCell(-1);
        td.innerHTML = x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
    }
    // Actually add the table to the DOM (the <body> element in this case)...you can specify where else to put it
    document.body.appendChild(table);
}

// Make sure DOM is ready for manipulation
window.onload = function () {
    var btn = document.getElementById("button_id");  // Whatever your button is
    // Bind the "click" event for the button
    btn.onclick = function () {
        // Make your AJAX request
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "cd_catalog.xml", false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
        // Pass the result to the function, instead of making everything global and sharing
        CdCatalog(xmlDoc);
    };
};

除非我弄错了，否则您不能将 <td> 嵌套在 <table> 中...您必须将它们嵌套在 <tr>...嵌套在 <table> 中

【讨论】：

哇，太棒了。你们真棒。我将把它分解并找出它是如何工作的。谢谢您的帮助。这里的每个人都很棒。
@FelipeGonzales 没问题。我刚刚更新并添加了 cmets，所以希望它可以帮助您更好地理解。如果您需要更多帮助，请告诉我们！
太不可思议了，如果您能看到我早点编写代码，您可以如此迅速地将它们组合在一起。就像看我祖母打字一样。再次感谢
@FelipeGonzales 哈哈哈......奶奶！好吧，我相信您可以用不同的语言对我们进行编码。这只是我和这里的其他人经常使用的东西。

【解决方案2】：

不要使用document.write。自文档关闭以来，它将删除标签内的所有内容。改为这样做：

document.body.innerHTML += "<td>blah</td>"

-or-

var td = document.createElement("td");
td.innerHTML = "blah"
document.querySelector("table").appendChild(td);

演示： http://jsfiddle.net/DerekL/AHZ4C/

【讨论】：

感谢 Derek，我查看了您的链接，这对我很有帮助。我慢慢明白了。