Уроки по PHP
JavaScript
Уроки по HTML
Дизайнерам
СЕОшникам
Разное
Как мы уже говорили, разработка современных сайтов требует не только красивый и удобный дизайн, но и динамичность. Сейчас динамичность это одно из основных требований к проекту. Цена сайта, в котором нет эффектов, динамических подгрузок и т.д. очень низкая, а квалификация веб мастера, который делает статичные сайты, оставляет желать лучшего.
Чтобы ваши сайты не были статичными, в этом уроке рассмотримподгрузку html-кода на JavaScript. В нашем примере, при нажатии на ссылку, в тег div, будет вставляться html-код. Текст, который был в теге div будет заменяться на новый.
Вставляться html код будет при помощи свойства innerHTML.
Исходный код нашего примера:
<html>
<head>
<title>Динамическая подгрузка html контента на JavaScript | Дизайн студия OX2</title>
</head>
<body>
<script type="text/javascript">
/**
* Функция вставляет html код в элемент с id равным element_id
* @author ox2.ru дизайн студия
**/
function loadContent(element_id) {
//Если элемент с id-шником element_id существует
if (document.getElementById(element_id)) {
document.getElementById(element_id).innerHTML =
"<h2>Создание сайтов в компании OX2</h2><p style="color:red";>Тут можно любой контент</p><p>Компания OX2.ru создает лучшие сайты. <br/> Цена сайта и наши работы, вы можете узнать на сайте <a href="http://ox2.ru/">http://ox2.ru/</a></p>";
}
}
</script>
<a href="javascript:void(0)" onclick="loadContent('block_id')">Вставить html-код в div</a><br/><br/>
<div id="block_id">
Сюда будет вставлен контент
</div>
</body>
</html>
Это первая часть статьи по подгрузке контента. Вторая часть будет чуть позже (уроков через 10-15), и будет посвящена подгрузки контента их отдельных файлов, при помощи технологии Ajax.
Комментарии (Написать комментарий)
Комментарий:
Специалист [17.02.2015]почему скрипт не работает
Комментарий:
Скрипт не работает, проверьте
Заполните все поля
Написать комментарий