JavaScript插入html代码

我有一种情况，当有一个表，你可以通过点击一个按钮添加一个新的行。该行由服务器动态生成，并以HTML格式返回。所以基本上我需要做的是将新行添加到旧表中。这样的事情：JavaScript插入html代码

tableelement.innerHTML = newHtml + tableelement.innerHTML;

这肯定有效，但我有一个表头，显然，我需要插入新的HTML后。我将如何做到这一点？ insertBefore或insertAfter不能帮助（afaik），因为它们是为了插入元素而不是未分离的HTML。那么，我怎么能有一个头行的对象，在它之后（或之前）插入另一行（在HTML中）？

感谢您的想法

来源

2010-05-06 Marius

我会考虑重新考虑这种方法。对于Internet Explorer中的表，innerHTML是只读的，因此您必然会遇到与当前方法的互操作性问题。您可以重构代码以使用DOM构建元素，而不是指定innerHTML。它非常简单，效率更高（不调用解析器），并且更多的跨浏览器兼容。

的Mozilla似乎与微软在此同意，并引述element.innerHTML文档：

[innerHTML的]不应该被用来编写的一个表W3C DOM方法部分应当用于该-虽然它可以用于写入整个表格或单元格的内容。

该过程涉及使用DOM Level 2方法table.insertRow()和tr.insertCell()。有关体面阅读，请参阅Building Tables Dynamically (MSDN)。

例（从MDC）：

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); 
}

来源

2010-05-06 16:31:33

好吧，我想我必须添加一个fe w行代码，并按照你的建议做，因为我没有看到任何其他简单的方法。 – Marius 2010-05-06 16:36:32

使用jQuery.after()。

一般来说，熟悉jQuery，因为它是一个很棒的类库。

来源

2010-05-06 16:11:15

这是一个个人项目，我讨厌在个人项目中使用第三方库:) – Marius 2010-05-06 16:15:46

如果我做的个人项目，我总是包括jQuery的只是一点着想的那种情况下，我使用更快的编程： – Spidfire 2010-05-06 16:38:33

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

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

来源

2010-05-06 16:11:49 Randolpho

因为我完全信任服务器响应并完全控制它，所以插入HTML比在JavaScript中生成行并添加数据更容易。当然，如果我的方法不可行，那么我会必须按照你的建议去做 – Marius 2010-05-06 16:15:03

@Marius：我并不是说不可能添加内部HTML，我只是说它不一定是最好的做法.DOM插入通常更快，更稳定，更灵活动态地插入原始的HTML，因为你从服务器获取HTML可能对你无关紧要，但稳定性和灵活性可能是值得的。如果这是一个个人项目用于学习，它可能会更好因为你要练习DOM操作而不是动态HTML生成 - 动态HTML是如此的1996 - 坦率地说，JQuery是做DOM操作的最佳方式。 – Randolpho 2010-05-06 17:21:07

如果新的HTML元素只是一个字符串，你的代码是正确的，没有问题。但是，当HTML元素包含HTML DOM元素（尤其是输入，textarea等形式的一部分）时，应该使用document.createElement（）方法。如果您使用prototype和scriptaculous，则应该尝试使用Builder.node（）。

/* 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);

来源

2010-07-28 22:02:02 iroel

JavaScript插入html代码

回答

相关问题