使用 Javascript 函数将 HTML 写入屏幕

Question

我是 JavaScript 的新手，HTML 我需要一些帮助！

我正在尝试在 JavaScript 中编写 table，写入页面 HTML，然后将该函数导入 HTML 文件以显示table.

我在 JavaScript 文件中有这个

function createTable()
{
    var table = "<table>";

    table += "<tr>";
    table += "<th><center>Title</center></th>";
    table += "</tr>";
    table += "<tr>";
    table += "<td><center> data </center></td>";
    table += "</tr>";
    table += "</table>";

    document.write(table);

}

然后我指定 src 并在 html 文件中调用函数，如下所示：

<head>
<script scr = "source/file.js" type=text/javascript"></script>
</head>

<body>
    <script>
        createTable()
    </script>
</body>

虽然这有效，但我听说使用 document.write() 是一种非常糟糕的做法。

我试过使用 table = document.getElementById('tablePrint').innerHTML; 然后在 HTML 文件中使用 <div id="tablePrint"></div> 但是我的 table 没有显示。我也试过 document.body.appendChild(table); 但这也不管用。

使用document.write()可以吗？或者他们是将我的 table 写入屏幕上的 HTML 的更好方法。

Answer 1

您的示例中缺少一些双引号。我建议你使用 JQuery:

$(function() { // After the HTML content loads
  var table = "<table>";

  table += "<tr>";
  table += "<th><center>Title</center></th>";
  table += "</tr>";
  table += "<tr>";
  table += "<td><center> data </center></td>";
  table += "</tr>";
  table += "</table>";

  $('body').append(table); // Appends HTML to an element
});

这里是 fiddle.

而 here 就是为什么 document.write() 不是一个好的做法

The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.

希望对您有所帮助:)

Answer 2

HTML <center> 元素自 1999 年 HTML 4 发布以来就已过时。令人惊讶的是人们（业余爱好者？）仍在尝试使用它。让我引用 Mozilla article：

This tag has been deprecated in HTML 4 (and XHTML 1) in favor of the CSS text-align property, which can be applied to the <div> element or to an individual <p>. For centering blocks, use other CSS properties like margin-left and margin-right and set them to auto (or set margin to 0 auto).

通常，我们不会使用 document.write 创建 HTML 内容，因为它不允许控制内容的插入位置。相反，我们使用合适的 DOM 属性（例如 innerHTML）和方法（例如 appendChild）。

创建 HTML table 并将其插入 HTML body 元素的正确方法是使用 DOM 方法 insertRow and insertCell，如以下代码示例所示：

function createTable() {
  var i=0, rowEl=null,
      tableEl = document.createElement("table");
  // create 10 table rows, each with two cells
  for (i=1; i <= 10; i++) {
    rowEl = tableEl.insertRow();  // DOM method for creating table rows
    rowEl.insertCell().textContent = "table cell "+ i +"-1" ;      
    rowEl.insertCell().textContent = "table cell "+ i +"-2" ;      
  }
  document.body.appendChild( tableEl);
}

Answer 3

用于此目的的 document.write() 方法不是首选。使用纯 JavaScript 执行此操作的最佳方法是使用 appendChild() 方法。

试试这个：

var table = document.createElement("table");  //Creating the <table> element
var tr1 = document.createElement("tr"); //Creating the first <tr> element
var tr2 = document.createElement("tr");  //Creating the second <tr> element
var th = document.createElement("th");  //Creating a <th> element
var td = document.createElement("td");  //Creating a <td> element
var text1 = document.createTextNode("Title"); //Creating the content of <th>
var text2 = document.createTextNode("data");  //Creating the content of <Ttd element

document.body.appendChild(table);  //The <body> is adopting the <table>
table.appendChild(tr1); //The <table> is adopting the first <tr>
tr1.appendChild(th);  //The first <tr> is adopting the <th>
table.appendChild(tr2);  //The <table> is adopting the second <tr>
tr2.appendChild(td);  //The second <tr> is adopting the <td>

th.appendChild(text1);  //<th> is adopting its content
td.appendChild(text2);  //<td> is adopting its content

<center> tag is deprecated now, don't use it, use CSS instead.

工作demo

Answer 4

将函数 return 和 table 作为字符串。

function createTable()
{
    var table = "<table>";

    table += "<tr>";
    table += "<th><center>Title</center></th>";
    table += "</tr>";
    table += "<tr>";
    table += "<td><center> data </center></td>";
    table += "</tr>";
    table += "</table>";

    return table;

}

假设您不想完全覆盖正文，请创建一个 div 以您想要的方式设置样式，然后只需在其中添加 table 内容。

<body>
<div id="table"></div>
    <script>
       var table=createTable();
       document.getElementById("table").innerHTML=table;
    </script>
</body>

使用 Javascript 函数将 HTML 写入屏幕

Write HTML to screen with Javascript function

html

javascript

document

function