Jquery добавить html тег

jQuery — Add Elements

We will look at four jQuery methods that are used to add new content:

• append() — Inserts content at the end of the selected elements
• prepend() — Inserts content at the beginning of the selected elements
• after() — Inserts content after the selected elements
• before() — Inserts content before the selected elements

jQuery append() Method

The jQuery append() method inserts content AT THE END of the selected HTML elements.

Example

jQuery prepend() Method

The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.

Example

Add Several New Elements With append() and prepend()

In both examples above, we have only inserted some text/HTML at the beginning/end of the selected HTML elements.

However, both the append() and prepend() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the examples above), with jQuery, or with JavaScript code and DOM elements.

In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we append the new elements to the text with the append() method (this would have worked for prepend() too) :

Example

function appendText() <
var txt1 = «

Text.

«; // Create element with HTML
var txt2 = $(» «).text(«Text.»); // Create with jQuery
var txt3 = document.createElement(«p»); // Create with DOM
txt3.innerHTML = «Text.»;
$(«body»).append(txt1, txt2, txt3); // Append the new elements
>

jQuery after() and before() Methods

The jQuery after() method inserts content AFTER the selected HTML elements.

The jQuery before() method inserts content BEFORE the selected HTML elements.

Example

$(«img»).before(«Some text before»);

Add Several New Elements With after() and before()

Also, both the after() and before() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the example above), with jQuery, or with JavaScript code and DOM elements.

In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we insert the new elements to the text with the after() method (this would have worked for before() too) :

Example

function afterText() <
var txt1 = «I «; // Create element with HTML
var txt2 = $(» «).text(«love «); // Create with jQuery
var txt3 = document.createElement(«b»); // Create with DOM
txt3.innerHTML = «jQuery!»;
$(«img»).after(txt1, txt2, txt3); // Insert new elements after
>

jQuery Exercises

jQuery HTML Reference

For a complete overview of all jQuery HTML methods, please go to our jQuery HTML/CSS Reference.

Источник

Вставка 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 в готовом документе, тогда как весь внутренний контент элементов абзаца обернет сначала элементом , а затем — элементом .

Источник

.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 ] );

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

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

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