Recientemente, se ha encontrado que todas las bibliotecas principales pueden usar xxx.innerhtml = html fragmentos para generar elementos de nodos, y luego insertarlas en varias ubicaciones del elemento objetivo. Esta cosa es en realidad InsertAdjacenthtml, pero el abominable interno de IE convierte esta ventaja en una desventaja.
No se puede asignar el innerhtml de Tbody en IE6/IE7/IE8/IE9, el código reproducido es el siguiente
La copia del código es la siguiente:<! Doctype html>
<html>
<Evista>
<meta charset = utf-8/>
<title> ie6-ie9 innerhtml no puede copiar error </title>
</ablo>
<Body Style = Altura: 3000px>
<Table>
<Tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</table>
<p>
<button id = btn1> get </button> <button id = btn2> set </button>
</p>
<script>
var tbody = document.getElementsBytagName ('tbody') [0]
función settbody () {
tbody.innerhtml = '<tr> <td> bbb </td> </tr>'
}
función getTBody () {
alerta (tbody.innerhtml)
}
btn1.onclick = function () {
getTbody ()
}
btn2.onclick = function () {
settbody ()
}
</script>
</body>
</html>
Dos botones, el primero obtiene el interno del tbody, y el segundo establece el interno del tbody.
Al obtenerlo, todos los navegadores aparecen una cadena de TR, pero al configurarlo, IE6-9 no lo admite, y se informa un error, como se muestra en la figura
Puede usar las características para determinar si el navegador admite la configuración interna de Tbody
La copia del código es la siguiente:var isupporttBodyInnerHtml = function () {
var tabla = document.createElement ('tabla')
var tbody = document.createElement ('tbody')
Table.appendChild (tbody)
var boo = verdadero
intentar{
tbody.innerhtml = '<tr> </tr>'
} catch (e) {
boo = falso
}
regresar boo
} ()
alerta (isupporttbodyinnerhtml)
Para IE6-II9, si desea establecer el InnerHTML de Tbody, puede usar el siguiente método alternativo
La copia del código es la siguiente:función settbodyinnerhtml (tbody, html) {
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</table>'
while (tbody.firstchild) {
tbody.removechild (tbody.frirstchild)
}
tbody.appendchild (Div.firstchild.firstchild)
}
Use un DIV para contener una tabla, luego elimine todos los elementos en el tbody y finalmente agregue el primer elemento del primer elemento del div a la tbody, es decir, div> table> tr.
Por supuesto, hay una versión más simplificada, que utiliza directamente el método ReplaceChild para reemplazar
La copia del código es la siguiente:función settbodyinnerhtml (tbody, html) {
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</table>'
tbody.parentnode.replacechild (div.firstchild.firstchild, tbody)
}
Desde el registro MSDN, el interno de Col, Colgroup, Frameset, HTML, Head, Style, Table, Tfoot, Thead, Title y TR son todos lectores (IE6-II9).
La propiedad InnerHTML es de solo lectura en los objetos Col, Colgroup, Frameset, HTML, Head, Style, Table, Tbody, Tfoot, Thead, Title and TR.
Puede cambiar el valor del elemento de título utilizando la propiedad Document.title.
Para cambiar el contenido de la tabla, tfoot, thead y TR elementos, use el modelo de objeto de tabla descrito en las tablas de construcción dinámicamente. Sin embargo, para cambiar el contenido de una celda en particular, puede usar InnerHTML.