Изменение HTML через jQuery часть 1 (html, wrap, remove, empty)

Библиотека jQuery обладает целым набором отличных методов для изменения HTML. В этой статье рассмотрим часть из наиболее востребованных.

Чтение и изменение содержания тегов (html)

Метод html позволяет изменять или считывать содержание тегов. Если предать ему параметр, то произойдёт замена содержание тега не переданное значение. Если параметр не передавать, то произойдёт считывание. Продемонстрируем обе эти функции:

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

В этом примере в первом случае использования метода html не передаётся никакого параметра в скобках. Поэтому метод возвращает HTML содержание элемента. Во втором случае ему передаётся строка с HTML тегом. Эта строка заменяет содержание элемента. В итоге на странице получится такой HTML код:

Тише, мыши, сыр на крыше

Обратите внимание, что из-за особенности работы селекторов в jQuery, действие будет произведено над всеми элементами, которые удовлетворяют условию, а не только над первым. То есть если выполнить код $(‘div’).html(‘ ‘), то HTML код во всех контейнерах на сайте будет заменён на пробел » «. Функция не остановится после первой замены.

То же самое можно сказать и о всех других методах, приведённых в этой статье.

Оборачивание элементов в HTML теги (wrap, wrapAll)

Метод wrap позволяет оборачивать элементы в выбранный тег. В параметре этого метода можно написать как название тега, в который надо обернуть (к примеру wrap(‘div’)), так и код тега полностью (к примеру wrap(‘ ‘)). Во втором случае можно задать ещё и атрибуты для тега-обёртки, к примеру класс или стиль: wrap(‘ ‘). Продемонстрируем оба способа:

Тише, мыши, кот на крыше А котята ещё выше  

Тише, мыши, кот на крыше
 
А котята ещё выше

Если понадобится обернуть не каждый элемент отдельно, а оба элемента в один тег, то можно воспользоваться методом wrapAll. Но для этого надо использовать тот селектор, который будет подходить к нескольким элементам. К примеру, сгруппируем по одному классу несколько элементов:

Тише, мыши, кот на крыше А котята ещё выше  

 
Тише, мыши, кот на крыше А котята ещё выше 

При выполнении метода wrapAll необходимо учитывать что если между выбираемыми элементами окажутся сторонние, которые не подходят под условие, то они будут принудительно передвинуты и окажутся после обёрнутого набора.

Удаление элементов или содержимого (remove, empty)

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

Тише, мыши, кот на крыше А котята ещё выше  

Существует метод empty, который удаляет содержимое элемента. То есть этот метод работает точно так же, как если если использовать метод html(»), у которого в скобках стоит строка с нулевой длиной (то есть кавычки открываются и сразу закрываются:

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

Источник

.replaceWith()

Description: Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

version added: 1.2 .replaceWith( newContent )

version added: 1.4 .replaceWith( function )

The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call. Consider this DOM structure:

div class="container">
 div class="inner first">Hello div>
 div class="inner second">And div>
 div class="inner third">Goodbye div>
 div>

The second inner could be replaced with the specified HTML:

$( "div.second" ).replaceWith( "
New heading
" );

This results in the structure:

div class="container">
 div class="inner first">Hello div>
 h2>New heading h2>
 div class="inner third">Goodbye div>
 div>

All inner elements could be targeted at once:

$( "div.inner" ).replaceWith( "
New heading
" );

This causes all of them to be replaced:

div class="container">
 h2>New heading h2>
 h2>New heading h2>
 h2>New heading h2>
 div>

An element could also be selected as the replacement:

$( "div.third" ).replaceWith( $( ".first" ) );

This results in the DOM structure:

div class="container">
 div class="inner second">And div>
 div class="inner first">Hello div>
 div>

This example demonstrates that the selected element replaces the target by being moved from its old location, not by being cloned.

The .replaceWith() method, like most jQuery methods, returns the jQuery object so that other methods can be chained onto it. However, it must be noted that the original jQuery object is returned. This object refers to the element that has been removed from the DOM, not the new element that has replaced it.

Additional Notes:

• The .replaceWith() method removes all data and event handlers associated with the removed nodes.
• Prior to jQuery 1.9, .replaceWith() would attempt to add or change nodes in the current jQuery set if the first node in the set was not connected to a document, and in those cases return a new jQuery set rather than the original set. The method might or might not have returned a new result depending on the number or connectedness of its arguments! As of jQuery 1.9, .after() , .before() , and .replaceWith() always return the original unmodified set. Attempting to use these methods on a node without a parent has no effect—that is, neither the set nor the nodes it contains are changed.

Examples:

On click, replace the button with a div containing the same word.

Источник

How to Replace String, Text or HTML in jQuery?

The replace() function is a jQuery function that can be used to replace elements that have been declared by the end-user. Each element is a set of matched elements that will be provided with new contents. It returns the set of elements that have not been removed by the end-user as well as only the removed elements.

These replace() methods have a few child methods, such as replaceAll() and replaceWith(). These replacements will be done by integrating target elements with the set of achieved items on the list, which might be a collection of strings.

Only the first instance of the value will be changed if you’re replacing a value rather than a regular expression. Use the global (g) modifier to replace all instances of a given value.

jQuery Replace String, Text, or HTML Element

Using the jQuery replace() function you can replace the specific string from the sentence. So if you want to change or replace the string from the sentence or text then use the replace function.

First, we will target that element where we want to make changes then we run the replace function by passing the targeted element and string. It will only replace the string at the first occurrence from the sentence. It means when you run the replace() function it will search the replaceable text from the sentence and where it is found it will stop.

Note: You need to use the replaceAll() function to replace all the occurrences of a string. We will cover later in the examples below.

Example 1 – jQuery Replace String

Let’s see the example of the jquery replace() function to replace the string.

In the above example, when you click on the Replace button then it will replace the ‘function’ string with ‘method’ in the given paragraph.

Example 2 – jQuery Replace Text

Let’s replace the full text of the element with replace() function. See the example code below.

The above example will replace the whole text with the custom text. See the codepen demo example from the below link.

Example 3 – jQuery Replace Text in Div

See the following example of how to replace text in tag.

Example 4 – jQuery Replace Text in Span

See the following example of how to replace text in tag.

Example 5 – jQuery Replace Text in Textarea

See the following example of how to replace text in tag.

Example 6 – jQuery Replace HTML

See the following example of how to replace HTML.

Example 7 – jQuery Replace Text with replaceAll() function

The replaceAll() function is a child function of replace() function. It will replace all the matched occurrences with custom text.

Syntax

See the following example of how to replace text using the replaceAll() function.

Example 8 – jQuery Replace Text with replaceWith() function

The replaceWith() function is also the child function of replace() function. It will replace selected elements with new custom text.

Syntax

Conclusion

So in this tutorial, you learned the jquery replace() function, how to replace string, text, or HTML elements with a specific string.

You also learned the replaceAll() function to replace all the matched occurrences in the paragraph text. If you have any questions please put in the comment section.

You May Also Like

How to Change Apply Coupon Button Text In WooCommerce?

How to Create a Right-Click Context Menu in React?

How to Create Custom Back Button with React Router?

How to Create a Blog Post Template in WordPress?

How to Remove OBJ Box From Title and URL in WordPress

How to Check If Checkbox is Checked or Not in jQuery?

About the Author: Aman Mehra

Hey! I’m Aman Mehra and I’m a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Источник

jQuery Change Content Div, Span

jQuery change content of div span; In this tutorial, you will learn how to change or replace div, span , button, paragraph text, or content in html using jQuery html() method.

jQuery Change Content Div, Span

jQuery Html Method

The jQuery html () method is used to change the entire contents of the selected elements. This selected element replaces content with new content.

Syntax jQuery Html Method

html() method returns the content of first matched element.

Html() method sets the content of matched element.

$(selector).html(function (index, currentcontent))

It sets the content using function.

• To set the content :- When you use this method to set the content, it overwrites the contents of all matched elements.
• To return the content :- When you use this method to return content, it first returns the content of the matched element.

Parameters of jQuery Html Method

Ex 1 :- jQuery html() method

Let’s see an example 1 of html() method.

Ex 2 :- jQuery html()

Let’s see example2 of html method. This example returns the first match of element.

       
Hello World
 
jQuery | html() Method
 $(document).ready(function()< $("#btn-click").click(function()< alert($("h2").html()); >); >);   

Ex 3 :- jQuery replace text

Let’s take a new example using the jQuery html() method. It will replace the h2 tag text. See the example below

       
Hello World
 
jQuery | html() Method
 $(document).ready(function()< $("#btn-click").click(function()< $("h2").html('Hello'); >); >);   

Recommended jQuery Tutorial

1. jQuery Text Method By Example
2. Get and Set Input, Select box, Text, radio Value jQuery
3. Duplicate Html Elements Using jQuery By Example
4. jQuery | Event MouseUp By Example
5. Event jQuery Mouseleave By Example
6. jQuery Event Mouseenter Example
7. Event jQuery MouseOver & MouseOut By Example
8. keyup jquery event example
9. Jquery Click Event Method with E.g.
10. Event jQuery. Blur By Example
11. jQuery form submit event with example
12. keydown function jQuery
13. List of jQuery Events Handling Methods with examples
14. Jquery Selector by .class | name | #id | Elements
15. How to Get the Current Page URL in jQuery
16. jQuery Ajax Get() Method Example
17. get radio button checked value jquery by id, name, class
18. jQuery Set & Get innerWidth & innerHeight Of Html Elements
19. jQuery Get Data Text, Id, Attribute Value By Example
20. Set data attribute value jquery
21. select multiple class in jquery
22. How to Remove Attribute Of Html Elements In jQuery
23. How to Checked Unchecked Checkbox Using jQuery
24. jQuery removeClass & addClass On Button Click By E.g.
25. To Remove whitespace From String using jQuery
26. jQuery Ajax Post Method Example
27. jQuery Ajax Get Method Example
28. To Load/Render html Page in div Using jQuery Ajax $.load
29. jQuery Sibling Methods – To Find Siblings Elements
30. jQuery Find Siblings Elements with Class, id

Author Admin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Источник