Internet Explorer поддерживает также свойства
innerText, outerText и outerHTML. Свойство innerText работает аналогично
innerHTML, за исключением того, что содержимое будет интерпретироваться как обычный текст, а не как HTML-код. Поэтому включение в строку HTML-кода не приведет к созданию соответствующих элементов HTML.
Установка
paral.innerText="<b>test</b>" приведет не к тому, что test будет отображаться полужирным шрифтом, а к тому, что будет отображена строка "
<b>test</b>". Свойства
outerHTML и outerText работают аналогично соответствующим свойствам с префиксом inner, за исключением того, что они также изменяют и сам элемент.
Написав
paral.outerHTML="
<b>test</b>", вы фактически удалите старый элемент абзаца, заменив его элементом "
<b>test</b>". Следующий пример будет полезен, если вы захотите поэкспериментировать с указанными свойствами.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>inner/outer Tester</title>
<meta http-equiv="content-type" content="text/html; " />
</head>
<body onload="document.testForm.content.value = theElement.innerHTML;">
<div style="background-color: yellow">
<br />
<p id="paral">Это пример <em>текста</em> для проверки.</p>
<br />
</div>
<br /><br /><hr />
<script type="text/javascript">
<!--
var theElement = document.getElementById("paral");
//-->
</script>
<form name="testForm" id="testForm" action="#" method="get">
Element Content:
<input type="text" name="content" id="content" size="60" /> <br />
<input type="button" value="set innerHTML"
onclick="theElement.innerHTML = document.testForm.content.value;" />
<input type="button" value="установить innerText" onclick="theElement.innerText = document.testForm.content.value;" />
<input type="button" value="установить outerText" onclick="theElement.outerText = document.testForm.content.value;" />
<input type="button" value="установить outerHTML" onclick="theElement.outerHTML = document.testForm.content.value;" />
<input type="button" value="Сброс" onclick="location.reload();" />
</form>
</body>
</html>