O objeto DHTML do IE fornece quatro propriedades legíveis e graváveis para manipular dinamicamente o conteúdo dos elementos da página: innerText, outerText, innerHTML, outerHTML
Dois pontos devem ser observados:
1. Os valores das propriedades innerText e outerText são apresentados como texto comum. Mesmo que contenha tags HTML, ele será refletido de forma verdadeira, enquanto innerHTML e outerHTML apresentam o texto analisado pelo mecanismo HTML, que pode refletir o efeito de desempenho das tags HTML nos atributos.
2. Atribuir valores aos atributos outerText e outerHTML de um objeto (ou seja, operações de gravação) excluirá o objeto.
A operação de atribuição dos quatro atributos acima substitui apenas o conteúdo de texto do objeto original. Se desejar adicionar novo conteúdo de texto na posição relevante do elemento especificado na página, você precisará usar os métodos insertAdjacentHTML e insertAdjacentText. O formulário é o seguinte:
object.insertAdjacentText(sWhere, sText)
object.insertAdjacentHTML(sWhere,sText)
Entre eles, sWhere representa a posição do texto inserido em relação à tag html. Possui os seguintes quatro valores predefinidos:
beforeBegin
,
afterBegin, beforeEnd e afterEnd.
Esses dois métodos devem ser usados após o carregamento de todo o documento, caso contrário ocorrerá um erro.
2. InsertAdjacentText só pode inserir texto comum e InsertAdjacentHTML pode inserir texto no formato HTML
3. Ao usar InsertAdjacentHTML para inserir um script, você deve usar o atributo defer no elemento de script, caso contrário, ocorrerá um erro de tempo de execução durante a execução do script
4. Depois que InsertAdjacentHTML insere um elemento html, todas e outras coleções de elementos possíveis serão atualizadas automaticamente para refletir as alterações dinâmicas. Por exemplo, o atributo sourceIndex dos elementos subsequentes na página será alterado.
5. Este método pode causar erros de tempo de execução ao atribuir atributos InsertHTML/outerHTML a tags HTML inválidas. Por exemplo, o código a seguir causará um erro:
Além disso, os seguintes detalhes precisam ser observados ao operar dinamicamente o conteúdo da página:
1. Somente o conteúdo exibido no documento BODY pode ser alterado dinamicamente pelas propriedades e métodos acima. O conteúdo do objeto BODY pode ser manipulado dinamicamente, mas o próprio objeto BODY não pode ser substituído.
2. Os atributos e métodos acima não podem operar em tags vazias (tags HTML sem conteúdo), como input e img.
3. Para objetos de tabela, apenas os objetos td (innerHTML/innerText) e table (outerHMTL/outerText) podem usar determinados atributos para substituir ou inserir conteúdo; outros objetos de tabela, como tr e tbody, não podem usar esses atributos para alterar o conteúdo;