Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Вывод сообщения на странице

Этот простой пример демонстрирует работу с DOM.

Пример позволяет создавать на странице новые DOM-узлы и выводить в них переданный текст.

При добавлении больше 10 сообщений первые будет удаляться с экрана.

нажмите Enter для отправки
Исходный код этого примера:
<form name='frm' onSubmit='addMessage(document.frm.msg.value);return false;' >
   <input name='msg' value='Тестовое сообщение'> нажмите Enter для отправки
</form>
<div id='msgarea'></div>

<script type="text/javascript">
var DEBUG_MESSAGES=10; // максимальное кол-во сообщений
msgnumber=0;	// очередной номер сообщения
function addMessage(msg) {
	var msgarea = document.getElementById('msgarea');
	if (msgarea) {
	    msgarea.style.display = 'block';
	    if (msgarea.getElementsByTagName('h4').length < 1) {
		var debugHeading = document.createElement('h4');
		debugHeading.appendChild(document.createTextNode('Debug output'));
		msgarea.appendChild(debugHeading);
	    }
	    if (msgarea.getElementsByTagName('p').length > DEBUG_MESSAGES) {
		msgarea.removeChild(msgarea.getElementsByTagName('p')[0]);
	    }
	    var note = document.createElement('p');
	    note.appendChild(document.createTextNode(msgnumber + ': ' + msg));
	    msgnumber++;
	    msgarea.appendChild(note);
	}
    }
// после загрузки страницы, поставить фокус на поле ввода
onload=new function() {document.frm.msg.focus();}
</script>

.