slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 680
Теги: javascript, div, createElement, appendChild, insertBefore
Javascript logo

В этой статье мы разберемся с тем, каким образом можно создать новый элемент в языке Javascript и в дальнейшем использовать его.

Необходимо разделять этот процесс на два этапа - создание нового элемента и, непосредственно, его добавление на страницу. Можно сказать, что сначала создается элемент, но его не видно, а уже потом, специальной командой он отображается на странице.

document.createElement(tag)

Для создания невидимого элемент используется данная команда. В ней слово tag - обозначает название HTML-элемента, который вы хотите добавить. Данное название записывается, как строковая переменная - в кавычках.

Для того, чтобы было более понятно, рассмотрим простой пример:

var div = document.createElement('div');

Как видите - здесь всё просто, мы объявляем новую переменную и создаем необходимый элемент. В будущем с этой переменной можно будет делать различные манипуляции.

Добавление div на страницу: appendChild, insertBefore

Следующие две команды похволяют добавить, созданный ранее нами элемент. Есть также альтернативный вариант добавления нового кода - использовать функцию innerHTML, и просто напрямую написать необходимый код, но тогда мы лишаемся возможности напрямую манипулировать с добавленными данными.

Рассмотрим функцию appendChild

Позволяет добавить созданный элемент внутрь другого, синтаксис выглядит следующим образом - parentElem.appendChild(elem), здесь parentElem родительский элемент, в который вставляется elem (созданный элемент). Рассмотрим простой пример:

var div = document.createElement('div');
document.body.appendChild(div);

Данный код, соответственно вставит <div></div> перед закрывающим тегом </body>.

Рассмотрим функцию insertBefore

Добавляет созданный элемент в определенное место родительского элемента. Синтаксис следующий - parentElem.insertBefore(elem, nextSibling), где parentElem родительский элемент, вставляемый - elem, а nextSibling позволяет определить место, куда будет вставлен блок (он должен указывать на элемент, перед которым будет он вставлен). Рассмотрим простой пример:

<div id="div_old">
  <p>
  Первый абзац
  </p>
  <p>
  Второй абзац
  </p>
</div>
var div = document.createElement('div');
div.innerHTML = "Вставляемый div";
div_old.insertBefore(div, div_old.children[1]);

В результате созданный div вставится между первым и вторым абзацем (стоит не забывать, что массивы нумируются с 0).

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • Varvarka
    4.00
  • ZOMRO
    3.20
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Как подключить на свой сайт jQuery

Для многих новичков в создании сайтов непонятно, что же такое JQuery, хоть они и постоянно слышат о нем и даже возможно пользовались.

Как мы знаем есть язык JavaScript, который позволяет работать динамически с элементами на странице и делать страницу более привлекательной.

Теги:

javascript, jQuery, google, jquery.min

Комментариев: 0 Подробнее
Ajax-форма обратной связи на JQuery

В этой статье мы расскажем о том, как сделать форму с ajax-запросом, при помощи библиотеки jQuery. Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.

Теги:

javascript, form, jQuery, ajax, onclick

Комментариев: 0 Подробнее
Увеличение изображения при нажатии на него.

В этой статье мы расскажем о том, как сделать модальное окно с увеличенным изображением.

Теги:

javascript, img, jQuery

Комментариев: 0 Подробнее

Последнее с форума

Urii-Polyakov-odnoklassniki аватар
Мы – команда разработчиков, дизайнеров и SEO-специалистов, которая любит свое дело и умеет создавать...
Перейти в тему
ZOMRO аватар
Оптимальные VDS/VPS Это сбалансированное предложение в соотношение цена-качество-количество ресурсо...
Перейти в тему
ZOMRO аватар
Скидка 50% на первый месяц Хотите получить уникальную скидку 50% на первый месяц пользования нашим ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.