Для динамичного, без перезагрузки страницы, изменения содержания контейнера DIV можно использовать getElementById и innerHTML.

С помощью getElementById мы находим нужный нам контейнер, после чего присваиваем ему нужное значение с помощь innerHTML.

Новое значение может быть задано по умолчанию.
Рассмотрим пример, в котором, при нажатии на ссылку, меняется текст в DIV с заданном ID:
<script>
function newDivVal(newVal)
{
document.getElementById("element").innerHTML = newVal;
}
</script>
<div id='element'>Старое значение</div>
<a href="#" onClick="newDivVal('Новое значение')">задать новое значение</a>

Вы можете посмотреть результат работы скрипта.

Новое значение, в режиме реального времени, может быть взято из формы.
Точнее – из поля INPUT (или TEXTAREA).

Ниже показан скрипт, который отображает, в блоке DIV, текст, набираемый пользователем:<script>
function ptest(formName,pole)
{
var input = document.forms[formName][pole].value;
document.getElementById("element").innerHTML = "Печатаем: "+input;
}
</script>
<div id='element'>Старое значение</div>
<form name='form1' action='' method='post'>
<input type='text' name='pole1' onKeyUp='ptest("form1","pole1")' value=''>
</form>

Этот скрипт может быть использован в качестве примитивного визуального редактора HTML – Вы сразу видите отображение вводимых HTML тэгов.
Вместо INPUT используем TEXTAREA и делаем небольшую задержку отображения результата с помощью функции setTimeout().
<script>
function ptest(formName,pole)
{
var input = document.forms[formName][pole].value;
document.getElementById("element").innerHTML = "Печатаем: "+input;
}
</script>
<div id='element'>Старое значение</div>
<form name='form1' action='' method='post'>
<!-- пауза в 2000 миллисекунд - 2 секунды;
экранируем слешем двойные кавычки внутри функции -->
<textarea style='width:550px;height:400px;' name='pole1' onKeyUp='setTimeout("ptest(\"form1\",\"pole1\")",2000);' value=''></textarea>
</form>