Вставка HTML в jQuery

Вставка HTML в jQuery

jQuery предоставляет несколько методов, таких как append(), prepend(), html(), text(), before(), after(), wrap() и т.д., которые позволяют нам вставлять новое содержимое в существующий HTML элемент, до него или после.

Методы jQuery html() и text() отвечают непосредственно за добавление нового содержимого (html код или текст) в выбранный элемент. При этом текущее содержимое тэга будет заменено. Давайте рассмотрим более подробно остальные методы.

Метод jQuery append()

Метод jQuery append() используется для вставки содержимого в конец выбранных элементов.

Следующий пример добавит некоторый HTML-код ко всем абзацам после загрузки документа, а при нажатии на кнопку, добавится еще и некоторый текст к основному блоку с id #container:

<script type="text/javascript">
  $(document).ready(function(){
    // Добавление элемента ко всем параграфам после загрузки документа
    $("p").append(' <a href="#">read more...</a>');
    // Добавление текста в блок с айди container
    $("button").click(function(){
      $("#container").append("This is demo text.");
    });
  });
</script>

Метод jQuery prepend()

Метод prepend() используется для вставки содержимого в начало выбранных элементов.

Следующий пример добавит некоторый HTML-код ко всем абзацам после загрузки документа, а при нажатии на кнопку, добавится еще и некоторый текст к основному блоку с id #container. В отличии от метода append(), метод prepend() добавляет содержимое в начало тэга:

<script type="text/javascript">
  $(document).ready(function(){
    // Добавление элемента ко всем параграфам после загрузки документа
    $("p").prepend("<strong>Note:</strong> ");
    // Добавление текста в блок с айди container
    $("button").click(function(){
      $("#container").prepend("This is demo text.");
    });
  });
</script>

Вставка нескольких элементов с помощью методов append() и prepend()

JQuery append() и prepend() также поддерживает передачу нескольких аргументов в качестве параметров.

Код jQuery в следующем примере вставит элемент <h1>, <p> и <img> внутри элемента <body> в качестве последних трех дочерних узлов.

<script type="text/javascript">
  $(document).ready(function(){
    var newHeading = "<h1>Note:</h1>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum...</em>";
    var newImage = $('<img src="images/smiley.png" alt="Smile">');
    $("body").append(newHeading, newParagraph, newImage);
  });
</script>

Метод jQuery before()

Метод jQuery before() используется для вставки содержимого перед выбранными элементами.

В следующем примере будет вставлен абзац перед элементом контейнера в готовом документе, тогда как вставка изображения перед элементом <h1> будет выполнена при нажатии кнопки.

<script type="text/javascript">
  $(document).ready(function(){
    // Добавить элемент до контейнера
    $("#container").before("<p>&mdash; Lorem Ipsum &mdash;</p>");
    // Добавить контент до заголовка
    $("button").click(function(){
      $("h1").before('<img src="images/symbol.gif" alt="Symbol">');
    });
  });
</script>

Метод jQuery after()

Метод jQuery after() используется для вставки содержимого после выбранных элементов.

В следующем примере будет вставлен абзац после элемента контейнера в загруженном документе, а вставка изображения после элемента <h1> при нажатии кнопки.

<script type="text/javascript">
  $(document).ready(function(){
    // Добавить элемент после контейнера 
    $("#container").after("<p>&mdash; Lorem Ipsum &mdash;</p>");
    // Добавить элемент после заголовка
    $("button").click(function(){
      $("h1").after('<img src="images/symbol.gif" alt="Symbol">');
    });
  });
</script>

Вставка нескольких элементов с помощью метода before() и after()

JQuery before() и after() также поддерживает передачу нескольких аргументов в качестве параметров. В следующем примере перед элементами <p> будут вставлены элементы <h1>, <p> и <img>.

<script type="text/javascript">
  $(document).ready(function(){
    var newHeading = "<h2>Heading:</h2>";
    var newParagraph = document.createElement("p");
    newParagraph.innerHTML = "<em>Lorem Ipsum...</em>";
    var newImage = $('<img src="images/symbol.png" alt="Symbol">');
    $("p").before(newHeading, newParagraph, newImage);
  });
</script>

Метод jQuery wrap()

Метод jQuery wrap() используется для вставки HTML вокруг выбранных элементов.

Код jQuery в следующем примере обернет элементы контейнера элементом <div> с классом .wrapper в готовом документе, тогда как весь внутренний контент элементов абзаца обернет сначала элементом <b>, а затем - элементом <em>.

<script type="text/javascript">
  $(document).ready(function(){
    // Оборачиваем контейнер новым элементов с классом wrapper
    $(".container").wrap('<div class="wrapper"></div>');
    // Оборачиваем содержимое параграфа элементами b и em
    $("button").click(function(){
      $("p").contents().wrap("<em><b></b></em>");
    });
  });
</script>

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*