javascript插入html代码

我有一种情况，当有一个表时，您可以通过单击按钮添加新行。该行由服务器动态生成，并以HTML形式传回。因此，基本上我需要做的是将新行作为前缀添加到旧表中。大概是这样的：

tableelement.innerHTML = newHtml + tableelement.innerHTML;

这当然有效，但我有一个表头，显然，我需要在它后面插入新的html。我该怎么做？insertBefore或insertAfter没有帮助（afaik），因为它们用于插入元素，而不是未解析的HTML。那么，如果有一个标题行的对象，如何在它之后（或之前）插入另一行（HTML）

感谢您的想法

使用

一般来说，要熟悉它，因为它是一个非常适合这类事情的库。

使用

---

一般来说，要熟悉它，因为它是一个非常适合这类事情的库。

您在服务器端有多少控制权？如果您有任何控制权，我建议您将表的数据传回，而不是从服务器端传回HTML

---

然后您可以自由地使用JQuery或MooTools在表中动态插入DOM结构，而不是HTML

您在服务器端有多少控制权？如果您有任何控制权，我建议您将表的数据传回，而不是从服务器端传回HTML

---

然后您可以自由地使用JQuery或MooTools在表中动态插入DOM结构，而不是HTMLinnerHTML是只读的，因此使用当前方法必然会遇到互操作性问题。您可以使用DOM重新构造代码以构建元素，而不是指定

innerHTML

。它相当简单，效率更高（不调用解析器），并且更兼容跨浏览器

Mozilla似乎同意微软的观点，并引用文档：

绝不应使用[innerHTML]来编写表的部分内容，尽管可以使用W3C DOM方法来编写整个表或单元格的内容，但应使用它来编写表的部分内容

该过程包括使用DOM级别2方法，以及。如需详细阅读，请参阅

示例（来自MDC）：

---

我会考虑重新思考这个方法。对于Internet Explorer中的表，code>innerHTML是只读的，因此使用当前方法必然会遇到互操作性问题。您可以使用DOM重新构造代码以构建元素，而不是指定

innerHTML

。它相当简单，效率更高（不调用解析器），并且更兼容跨浏览器

Mozilla似乎同意微软的观点，并引用文档：

绝不应使用[innerHTML]来编写表的部分内容，尽管可以使用W3C DOM方法来编写整个表或单元格的内容，但应使用它来编写表的部分内容

该过程包括使用DOM级别2方法，以及。如需详细阅读，请参阅

示例（来自MDC）：

---

如果新的HTML元素只是一个字符串，那么代码是正确的，没有问题。但是，当HTML元素包含HTMLDOM元素（特别是表单的一部分，如input、textarea等）时，应该使用document.createElement（）方法。如果使用and，则应尝试使用Builder.node（）

---

如果新的HTML元素只是一个字符串，那么代码是正确的，没有问题。但是，当HTML元素包含HTMLDOM元素（特别是表单的一部分，如input、textarea等）时，应该使用document.createElement（）方法。如果使用and，则应尝试使用Builder.node（）

---

由于我完全信任服务器响应并完全控制它，因此插入HTML比用JavaScript生成行并向其中添加数据更容易。当然，如果我的方法是不可能的，那么我必须按照你的建议去做。@Marius：我不是说不可能添加内部HTML，我只是说这不一定是最好的做法。DOM插入通常比动态插入原始HTML更快、更稳定、更灵活。考虑到您正在从服务器获取HTML，更快可能对您来说并不重要，但稳定性和灵活性可能是值得的。如果这是一个用于学习的个人项目，那么您最好练习DOM操作，而不是动态HTML生成—动态HTML就是这样—坦率地说，JQuery是进行DOM操作的最佳方式。因为我完全信任服务器响应，并且完全控制它，对我来说，插入HTML比用JavaScript生成行并向其中添加数据更容易。当然，如果我的方法是不可能的，那么我必须按照你的建议去做。@Marius：我不是说不可能添加内部HTML，我只是说这不一定是最好的做法。DOM插入通常比动态插入原始HTML更快、更稳定、更灵活。考虑到您正在从服务器获取HTML，更快可能对您来说并不重要，但稳定性和灵活性可能是值得的。如果这是一个用于学习的个人项目，那么最好是练习DOM操作而不是动态HTML生成——动态HTML就是这样——坦率地说，JQuery是进行DOM操作的最佳方式。这是一个个人项目，我讨厌在个人项目中使用第三方库：）如果我做个人项目，我总是包括jquery，只是为了在我使用的那种情况下加快编程速度：这是个人项目，我讨厌在个人项目中使用第三方库：）如果我做个人项目，我总是包括jquery，只是为了更快地为我使用的这种情况编程：好的，我想我必须添加几行代码，然后按照你的建议做，因为我看不到任何其他简单的方法

function addRow(tableID)
{
  // Get a reference to the table
  var tableRef = document.getElementById(tableID);

  // Insert a row in the table at row index 0
  var newRow   = tableRef.insertRow(0);

  // Insert a cell in the row at index 0
  var newCell  = newRow.insertCell(0);

  // Append a text node to the cell
  var newText  = document.createTextNode('New top row')
  newCell.appendChild(newText);
}

/* using native DOM */
//create new row
var new_row = document.createElement('tr');
//create new column
var new_column = document.createElement('td');
//add a text to column or cell
new_column.innerHTML = 'my new string';
new_row.appendChild(new_column);
tableelement.insertBefore(new_row, tableelement.firstChild);

/* using prototype & script.aculo.us */
var new_cell = Builder.node('tr', [
    Builder.node('td', 'my new string')
]);
new Insertion.Top(tableelement, new_cell);