Как на JQuery добавить элемент

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Добавление элемента на JQuery</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
</head>
<body>
  <h2>JQuery в примерах</h2>
  <h2>Клиентские скрипты</h2>
  <h3>Посещайте</h3>
  <h3>мой сайт</h3>
  <h3>каждый день</h3>
  <div></div>
  <p>А вот это уже обычный параграф.</p>

  <script>
  // Пример 1:
  var paragraf = "<p class=\"novii-element\">Этот параграф был добавлен средствами JavaScript + JQuery.</p>";
  $(".dobavit-element").clone().add(paragraf).appendTo(document.body);

  // Пример 2:
  $("h2").css("color", "green");

  // Пример 3:
  $(document.getElementsByTagName('h3')[2]).css('color', 'maroon');
  </script>
</body>
</html>

Поясню, что выполняют эти три (между <script>… </script>), скажем так фрагмента, разделенные новыми абзацами:

  • Пример 1 — после блочного элемента с классом novii-element будет создан новый параграф.
  • Пример 2 — все теги <h2>, вернее текст внутри них будет окрашен зеленым цветом.
  • Пример 3 — последний (третий по счету) тег <h3> будет окрашен бордовым цветом.

JQuery добавить элемент

Опубликовано 4-02-2013 в 16:47


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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Свежие комментарии

  • Валерий: к записи Моё личное мнение - хороший хостинг. На нём уже да »
  • DeKoS: к записи Робит всё. »
  • Администратор: к записи Что-то слишком дешево, подозрительно... »
  • Валерий: к записи Лучше, конечно, платный хостинг. Бесплатных полноц »
  • Администратор: к записи Нажмите на кнопку Скачать в статье. »
  • маша: к записи Ничего не понятно для новичка без CSS кода. Пожалу »
  • Администратор: к записи Почитайте информацию на http://javascript.ru/ »

Последние твиты