
Разработка современных сайтов требует не только красивый и удобный дизайн, но и динамичность. Сейчас динамичность это одно из основных требований к проекту.
Чтобы ваши сайты не были статичными, в этом уроке рассмотрим подгрузку html-кода на JavaScript. В нашем примере, при нажатии на ссылку, в тег div, будет вставляться html-код. Текст, который был в теге div будет заменяться на новый.
Вставляться html код будет при помощи свойства innerHTML.
Исходный код нашего примера:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
.
He graciously told me to go ahead, anddeadly honeymoon became my first hardcover novel, a fair success in book form and ultimately the basis of time for kids homework helper a film, callednightmare honeymoon for reasons I wouldnt presume to guess