El objeto DHTML de IE proporciona cuatro propiedades legibles y escribibles para manipular dinámicamente el contenido de los elementos de la página: InnerText, OuterText, InnerHTML, OuterHTML.
Se deben tener en cuenta dos puntos:
1. Los valores de las propiedades InnerText y OuterText se presentan como texto normal. Incluso si contiene etiquetas HTML, se reflejará con sinceridad; mientras que internalHTML y externalHTML presentan el texto analizado por el motor HTML, que puede reflejar el efecto de rendimiento de las etiquetas HTML en los atributos.
2. Asignar valores a los atributos externalText y externalHTML de un objeto (es decir, operaciones de escritura) eliminará el objeto.
La operación de asignación de los cuatro atributos anteriores solo reemplaza el contenido de texto del objeto original. Si desea agregar nuevo contenido de texto en la posición relevante del elemento especificado en la página, debe utilizar los métodos insertAdjacentHTML e insertAdjacentText. El formulario es el siguiente:
object.insertAdjacentText(sWhere, sText)
objeto.insertAdjacentHTML(sDonde, sTexto)
Entre ellos, sWhere representa la posición del texto insertado en relación con la etiqueta html. Tiene los siguientes cuatro valores preestablecidos:
beforeBegin, afterBegin, beforeEnd y afterEnd.
Preste atención a los siguientes puntos cuando los use:
1. Estos dos métodos deben utilizarse después de cargar todo el documento; de lo contrario, se producirá un error.
2. InsertAdjacentText solo puede insertar texto normal y InsertAdjacentHTML puede insertar texto en formato html
3. Cuando utilice InsertAdjacentHTML para insertar un script, debe utilizar el atributo defer en el elemento del script; de lo contrario, se producirá un error de tiempo de ejecución durante la ejecución del script
4. Después de que InsertAdjacentHTML inserte un elemento html, todas las colecciones de elementos posibles se actualizarán automáticamente para reflejar los cambios dinámicos. Por ejemplo, el atributo sourceIndex de los elementos posteriores de la página cambiará.
5. Este método puede provocar errores de tiempo de ejecución al asignar atributos InsertHTML/outerHTML a etiquetas HTML no válidas. Por ejemplo, el siguiente código provocará un error:
<BODY>
<p id=pdiv></p>
<SCRIPT LANGUAGE="JavaScript">
pdiv.innerHTML = "<p>hola</p>"
</SCRIPT>
</CUERPO>
Además, se debe prestar atención a los siguientes detalles al operar dinámicamente el contenido de la página:
1. Solo el contenido que se muestra en el documento BODY se puede cambiar dinámicamente mediante las propiedades y métodos anteriores. El contenido del objeto BODY se puede manipular dinámicamente, pero el objeto BODY en sí no se puede reemplazar.
2. Los atributos y métodos anteriores no pueden funcionar con etiquetas vacías (etiquetas html sin contenido), como input e img.
3． Para los objetos de tabla, solo los objetos td (innerHTML/innerText) y table (outerHMTL/outerText) pueden usar ciertos atributos para reemplazar o insertar contenido; otros objetos de tabla, como tr y tbody, no pueden usar estos atributos para cambiar el contenido.