如何在不删除之前的 innerHTML 的情况下使用 innerHTML？ [复制]
Posted
技术标签:
【中文标题】如何在不删除之前的 innerHTML 的情况下使用 innerHTML？ [复制]【英文标题】：How can I use innerHTML without delete the before innerHTML? [duplicate] 【发布时间】：2012-04-17 01:03:53 【问题描述】：可能重复：Is it possible to append to innerhtml without destroying descendants' onclick functions?
我想将 Array 转换为 HTML 表格，但 innerHTML 删除了它之前写入的内容。代码如下：
<html><div id="tablaP"></div>
function cargar2()
document.getElementById('tablaP').innerHTML= "<table>"
var h=1
for (i=0;i<miArray.length;i++)
document.getElementById('tablaP').innerHTML = '<tr>'
for (j=0;j<miArray[i].length;j++)
document.getElementById("tablaP").innerHTML = '<td><td>'
document.getElementById('tablaP').innerHTML = '</tr>'
h++
document.getElementById('tablaP').innerHTML = '</table>'
【问题讨论】：
这是关于该主题的另一个 SO 问题：***.com/questions/595808/… 【参考方案1】：这可以通过构建您的 html 字符串然后通过一次调用应用它来轻松完成：
function cargar2()
var h=1;//not sure why you have this
var html = "";
html += "<table>";
for (i=0;i<miArray.length;i++)
html += '<tr>';
for (j=0;j<miArray[i].length;j++)
html += '<td></td>' ;
html += '</tr>';
h++;
html += '</table>';
document.getElementById('tablaP').innerHTML = html;
编辑：修复所有代码格式！
【讨论】：
【参考方案2】：使用其他方法。将整个表格构建为字符串，然后执行单个 innerHTML。
这样它会很快，并且与 IE 兼容，在动态向表中添加行时会出现一些可怕的相关错误......
【讨论】：
【参考方案3】：创建一个字符串变量并将表格的内容添加到该变量中，例如：
var h=1;
var table='<table>';
for(i=0;i<miArray.length;i++)
table+='<tr>';
for(j=0;j<miArray[i].length;j++)
table+='<td></td>';
table+='</tr>';
h++;
document.getElementById('tablaP').innerHTML=table+'</table>';
【讨论】：
【参考方案4】：您应该将所有表创建附加到一个字符串，然后最后将该字符串分配给innerHTML，如下所示。
function cargar2()
var tableCreation = "<table>"
var h=1
for (i=0;i<miArray.length;i++)
tableCreation += '<tr>'
for (j=0;j<miArray[i].length;j++)
tableCreation += '<td></td>'
tableCreation += '</tr>' h++
document.getElementById('tablaP').innerHTML = tableCreation;
【讨论】：
【参考方案5】：为了有效地做到这一点，将 HTML 片段推送到一个数组中，将数组中的字符串连接成一个字符串，然后使用 innerHTML 将其放入元素中：
function cargar2()
var html = ['<table>'];
var h = 1;
for (i = 0; i < miArray.length; i++)
html.push('<tr>');
for (j = 0; j < miArray[i].length; j++)
html.push('<td><td>');
html.push('</tr>');
h++;
html.push('</table>');
document.getElementById('tablaP').innerHTML = html.join('');
【讨论】：
【参考方案6】：天哪，有多少东西让人眼前一亮……
不要在每次需要 div 时调用 document.GetElementByID()！
改用引用（变量）：
var myTableDiv = document.getElementById('tablaP');
myTableDiv.InnerHTML += ""
myTableDiv.innerHTML += "";
我主要建议设置一个字符串.. 最后才通过 InnerHTML。
例如
var myTableHTML = ""; 变量 h=1 对于 (i=0;i'; 对于 (j=0;j myTableHTML += ''; myTableHTML += ''; h++ document.getElementById('tablaP').innerHTML = myTableHTML;
【讨论】：
以上是关于如何在不删除之前的 innerHTML 的情况下使用 innerHTML？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章
如何在不弄乱下拉值的情况下使 Angular Reactive Formarray 中的级联下拉菜单工作