Recentemente, verificou -se que todas as principais bibliotecas podem usar xxx.innerhtml = fragmentos html para gerar elementos do nó e, em seguida, inseri -los em vários locais do elemento de destino. Essa coisa é realmente insertadjacenthtml, mas o abominável innerhtml abominável do IE transforma essa vantagem em uma desvantagem.
O innerhtml de tbody in ie6/ie7/ie8/ie9 não pode ser atribuído, o código reproduzido é o seguinte
A cópia do código é a seguinte:<! Doctype html>
<html>
<head>
<meta charset = utf-8/>
<title> ie6-ie9 innerhtml não pode copiar bug </ititle>
</head>
<estilo de corpo = altura: 3000px>
<tabela>
<Tbody>
<tr> <td> aaa </td> </tr>
</tbody>
</tabela>
<p>
<Button ID = BTN1> Get </botão> <Button ID = BTN2> Set </botão>
</p>
<Cript>
var tbody = document.getElementsByTagName ('tbody') [0]
function Settbody () {
tbody.innerhtml = '<tr> <td> bbb </td> </tr>'
}
função gettbody () {
alerta (tbody.innerhtml)
}
Btn1.OnClick = function () {
gettbody ()
}
btn2.OnClick = function () {
Settbody ()
}
</script>
</body>
</html>
Dois botões, o primeiro recebe o inerhtml do Tody, e o segundo define o inerhtml do corpo.
Ao obtê-lo, todos os navegadores aparecem uma série de TR, mas ao defini-lo, o IE6-9 não o suporta, e um erro é relatado, como mostrado na figura
Você pode usar as características para determinar se o navegador suporta a configuração innerhtml de TBody
A cópia do código é a seguinte:var isupporttBodyInnerHtml = function () {
var tabela = document.createElement ('tabela')
var tbody = document.createElement ('tbody')
tabela.AppendChild (TBody)
var boo = verdadeiro
tentar{
tbody.innerhtml = '<tr> </tr>'
} catch (e) {
boo = false
}
retornar boo
} ()
alerta (isupporttbodyinnerhtml)
Para o IE6-II9, se você quiser definir o INnerHtml de TBody, você pode usar o seguinte método alternativo
A cópia do código é a seguinte:Função de acordo
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</ table>'
while (tbody.firstchild) {
tbody.RemoVechild (TBody.FirstChild)
}
tbody.appendChild (div.firstchild.firstchild)
}
Use uma div para conter uma tabela e exclua todos os elementos no TBody e, finalmente, adicione o primeiro elemento do primeiro elemento do DIV ao TBody, ou seja, DIV> TABLE> TR.
É claro que há uma versão mais simplificada, que usa diretamente o método Replacechild para substituir
A cópia do código é a seguinte:Função de acordo
var div = document.createElement ('div')
div.innerhtml = '<table>' + html + '</ table>'
tbody.parentnode.replacechild (div.firstchild.firstchild, tbody)
}
Do registro do MSDN, o Innerhtml de Col, Colgroup, FrameSet, HTML, Cabeça, Estilo, Tabela, Tfoot, Thead, Title e TR são todos somente leitura (IE6-IE9).
A propriedade Innerhtml é somente leitura no Col, Colgroup, FrameSet, HTML, Head, Style, Table, TBody, Tfoot, Thead, Title e TR Objects.
Você pode alterar o valor do elemento de título usando a propriedade Document.Title.
Para alterar o conteúdo da tabela, TFOT, Thead e TR Elements, use o modelo de objeto de tabela descrito nas tabelas de construção dinamicamente. No entanto, para alterar o conteúdo de uma célula específica, você pode usar o InnerHTML.