Jquery добавить html внутрь элемента

Изменение HTML через jQuery часть 2 (prepend, append, before, after, insert)

Для добавления HTML элементов на страницу в библиотеке jQuery есть целый набор методов. Они позволяют вставлять код до и после определённых узлов, внутри и снаружи. Разберём как использовать их.

Добавление в начало и конец элемента (prepend, append)

Для добавления HTML кода внутрь существующего элемента можно использовать два метода: prepend, append. Первый добавляет код в начало элемента, а второй в конец. Придумаем пример, в котором продемонстрируем использование двух методов одновременно:

Тише, мыши, кот на крыше
  

/начало/Тише, мыши, кот на крыше/конец/

— в примере в начало и конец строки были добавлены строки ‘/начало/’ и ‘/конец/’. Но можно добавлять и строки с HTML кодом. К примеру, можно вместо ‘/начало/’ поставить ‘/начало/‘, и вместо ‘/конец/’ поставить ‘/конец/‘

Существуют два метода, которые являются родственниками (практически синонимами) приведённых в этом параграфе. Это методы appendTo и prependTo. Разница незначительная в том, что если в «prepend» и «append» надо передавать HTML код, который будет вставлен, то в «appendTo» и «prependTo» надо передавать селектор элементов. То есть если переписать предыдущий пример через appendTo и prependTo, то значения в круглых скобках поменяются местами:

Тише, мыши, кот на крыше
  

Правда в отличии от «prepend» и «append» в этом примере нельзя просто поставить ‘/начало/’ и ‘/конец/’. Нужно обрамить их тегами. Но результат будет полностью идентичен результату предыдущего примера:

/начало/Тише, мыши, кот на крыше/конец/

Добавление до и после элемента (before, after)

Чтобы добавить HTML код до или после элемента необходимо использовать методы before или after. Продемонстрируем это:

Тише, мыши, кот на крыше
  

/начало/
 
Тише, мыши, кот на крыше
 
/конец/

Как и в случае с «prepend» и «append», у «before» и «after» существуют синонимы. Это методы insertAfter и insertBefore. Разница между ними аналогичная: если в «before» и «after» надо передавать HTML код, который будет вставлен, то в «insertAfter» и «insertBefore» надо передавать селектор элементов. Если переписать предыдущий пример через insertAfter и insertBefore, то значения в круглых скобках поменяются местами:

Тише, мыши, кот на крыше
  

/начало/
 
Тише, мыши, кот на крыше
 
/конец/

Источник

DOM Вставка внутрь

Эти методы позволяют вставить новое содержимое внутрь существующего элемента.

.append()

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

.appendTo()

Функция добавляет содержимое в конец элементов.

.html()

Возвращает или изменяет html-содержимое выбранных элементов страницы.

.prepend()

Функция добавляет содержимое в начало определенных элементов.

.prependTo()

Функция добавляет все выбранные элементы внутрь другого набора элементов перед существующим контентом.

.text()

Возвращает или изменяет текстовое содержимое выбранных элементов страницы.

• Ajax
  • Глобальные Ajax события
  • Вспомогательные методы
  • Низкоуровневый интерфейс
  • Сокращенные методы
  • Базовые
  • Пользовательские
  • Затухание
  • Скольжение
  • События браузера
  • Загрузка документа
  • Прикрепление обработчиков
  • Объект событие
  • События формы
  • События клавиатуры
  • События мыши
  • Class атрибут
  • Копирование
  • DOM Вставка вокруг
  • DOM Вставка внутрь
  • DOM Вставка вне
  • DOM Удаление
  • DOM Замена
  • Общие аттрибуты
  • Свойства стилей
  • Манипуляция коллекциями
  • Хранилище данных
  • DOM методы элементов
  • Методы установки
  • Экземпляр объекта jQuery
  • Глобальный объект jQuery
  • Атрибут
  • Базовые
  • Базовые фильтры
  • Фильтры потомков
  • Фильтры содержимого
  • Форма
  • Иерархия
  • jQuery расширение
  • Фильтр видимости
  • Фильтрация
  • Обход
  • Обход элементов
  • Версия 1.3
  • Версия 1.7
  • Версия 1.8
  • Версия 1.9
  • Версия 1.10
  • Версия 3.0

  Русская документация по jQuery.
  При использовании любых материалов с сайта ссылка на сайт обязательна.

  Источник

  .append()

  .append( content [, content ] ) Returns: jQuery

  Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements.

  version added: 1.0 .append( content [, content ] )

  DOM element, text node, array of elements and text nodes, HTML string, or jQuery object to insert at the end of each element in the set of matched elements.

  One or more additional DOM elements, text nodes, arrays of elements and text nodes, HTML strings, or jQuery objects to insert at the end of each element in the set of matched elements.

  version added: 1.4 .append( function )

  A function that returns an HTML string, DOM element(s), text node(s), or jQuery object to insert at the end of each element in the set of matched elements. Receives the index position of the element in the set and the old HTML value of the element as arguments. Within the function, this refers to the current element in the set.

  The .append() method inserts the specified content as the last child of each element in the jQuery collection (To insert it as the first child, use .prepend() ).

  The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .append() , the selector expression preceding the method is the container into which the content is inserted. With .appendTo() , on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.

  Consider the following HTML:

  h2>Greetings h2>
  div class="container">
   div class="inner">Hello div>
   div class="inner">Goodbye div>
   div>

  You can create content and insert it into several elements at once:

  Each inner element gets this new content:

  h2>Greetings h2>
  div class="container">
   div class="inner">
   Hello
   p>Test p>
   div>
   div class="inner">
   Goodbye
   p>Test p>
   div>
   div>

  You can also select an element on the page and insert it into another:

  If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned):

  div class="container">
   div class="inner">Hello div>
   div class="inner">Goodbye div>
   h2>Greetings h2>
   div>

  Important: If there is more than one target element, however, cloned copies of the inserted element will be created for each target except for the last one.

  Additional Arguments

  Similar to other content-adding methods such as .prepend() and .before() , .append() also supports passing in multiple arguments as input. Supported input includes DOM elements, jQuery objects, HTML strings, and arrays of DOM elements.

  For example, the following will insert two new s and an existing as the last three child nodes of the body:

  var $newdiv1 = $( "
   newdiv2 = document.createElement( "div" ),
   existingdiv1 = document.getElementById( "foo" );
   
  $( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );

  Since .append() can accept any number of additional arguments, the same result can be achieved by passing in the three s as three separate arguments, like so: $('body').append( $newdiv1, newdiv2, existingdiv1 ) . The type and number of arguments will largely depend on how you collect the elements in your code.

  Additional Notes:

  • By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.
  • jQuery doesn't officially support SVG. Using jQuery methods on SVG documents, unless explicitly documented for that method, might cause unexpected behaviors. Examples of methods that support SVG as of jQuery 3.0 are addClass and removeClass .

  Examples:

  Appends some HTML to all paragraphs.

  Источник

  Вставка HTML в jQuery

  

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

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

  Метод jQuery append()

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

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

  Метод jQuery prepend()

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

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

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

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

  Код jQuery в следующем примере вставит элемент ,

  и внутри элемента в качестве последних трех дочерних узлов.

  Метод jQuery before()

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

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

  Метод jQuery after()

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

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

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

  JQuery before() и after() также поддерживает передачу нескольких аргументов в качестве параметров. В следующем примере перед элементами

  будут вставлены элементы ,

  и .

  Метод jQuery wrap()

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

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

  Источник