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.

Источник

Работа с HTML, текстом и атрибутом value в jQuery

В jQuery имеются три метода, которые позволяют напрямую работать с контентом элемента:

• html – для чтения и изменения HTML содержимого элемента;
• text – для чтения и изменения текстового содержимого элемента;
• val – для чтения и изменения значения элементов формы.

Чтение HTML контента элемента

Например, получим HTML содержимое элемента с идентификатором ( id ) contact :

// сохраним HTML контент элемента в переменную contactHTML var contactHTML = $('#contact').html();

Если выборка содержит несколько элементов, то данный метод вернёт HTML контент только первого элемента:

Содержимое 1.
 
Содержимое 2.
 .  

Для того чтобы получить HTML контент всех найденных элементов необходимо воспользоваться циклом (например, each ):

$('p').each(function(){ // выведем содержимое текущего элемента в консоль console.log($(this).html()); });

Изменение HTML контента элемента

Например, заменим содержимое элемента ul :

Если на странице будет несколько элементов ul , то данный метод заменит содержимое каждого из них.

Если необходимо изменить контент только у одного элемента на странице, то наиболее просто это сделать через id .

Использование функции для замены HTML контента элемента:

Название 1.
 
Название 2.
 
Название 3.
 .  

Например, изменим контент элементов (зачеркнём старый контент и добавим рядом новый):

75
 
37
 
64
 
17
 
53
 .  

Получение текстового содержимого элемента

В jQuery получение содержимого элемента в виде обычного текста осуществляется с помощью метода text . При этом все HTML теги, если они присутствуют в контенте, будут вырезаны.

Например, получим текстовое содержимое элемента p и выведем его в контент другого элемента:

 Получить текстовый контент элемента p 
Этот параграф содержит ссылку.
 .  

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

Замена контента элемента указанным текстом

Метод text может использоваться не только для чтения, но и для изменения содержимого указанного элемента. При этом HTML теги (если они присутствуют в тексте) будут закодированы с помощью спецсимволов.

 
Некоторый контент.
 .  

После выполнения, элемент div с классом info будет иметь следующий HTML код:

На экране данный элемент будет выглядеть так:

Если в выборке присутствует несколько элементов, то метод text заменит содержимое каждого из них:

Контент 1 .
 
Контент 2 .
 
Контент 3 .
 .  

Использование в качестве параметра метода text функции (добавим в скобках к содержимому каждого выбранного элемента длину его текстовой информации):

Некоторое содержимое.
 
Ещё некоторый контент.
 .  

Удаление контента элемента

В jQuery для удаления содержимого элемента имеется метод empty . Данный метод не только удаляет элементы, но и другие его дочерние узлы, включая текст.

Например, удалим содержимое всех элементов с классом vote :

Получение значения элемента формы

В jQuery чтение значений элементов input , select и textarea осуществляется посредством метода val .

Например, получим значение элемента input :

 .  

Метод val , если в коллекции присутствует несколько элементов, вернёт значение только первого из них.

 Белый 
 Зелёный 
 Коричневый 
.  

Для получения значения выбранного элемента ( select , checkbox , или radio кнопок) используйте :checked .

// получить значение выбранной опции select $('select.color option:checked').val(); // получить значение выбранного select $('select.size').val(); // получить значение отмеченного (checked) checkbox $('input[type="checkbox"][name="answers"]:checked').val(); // получить значение установленной радиокнопки $('input[type="radio"][name="rating"]:checked').val();

Если коллекции нет элементов, то метод val возвращает значение undefined .

Например, получим значение элемента textarea , имеющего имя description :

var valDescription = $('textarea[name="description"]').val(); if (valDescription !== undefined) { console.log('Значение элемента textarea: ' + valDescription); } else { console.log('Элемент textarea с именем description на странице не найден!'); }

Получим значение элемента select :

 16Gb 32Gb  .  

Если элемент select имеет множественный выбор (атрибут multiple ), то метод val возвратит в качестве результата массив, содержащий значение каждой выбранной опции ( option ). Если ни одна опция не отмечена, то данный метод вернёт в качестве ответа пустой массив (до версии jQuery 3 значение null ).

 Acer Samsung Asus   

Установка значения элементу формы

Изменение значения элемента формы в jQuery осуществляется с помощью метода val .

Например, при клике на кнопку установим элементу input её текст:

 
Кнопка 1 Кнопка 2 Кнопка 3 
 .  

Данный метод устанавливает значение для всех элементов набора, к которому он применяется.

Например, преобразуем все буквы значения элемента input после потеря фокуса в прописные:

 .  

Например, поменяем значение элемента select :

 Красный Зелёный Синий   

Например, присвоим значения элементу select с множественным выбором ( multiple ):

 Английский Французский Испанский Китайский  .  

Изменим, значение checkbox :

 Вы знаете английский .  

Источник

Замена содержимого элемента div с помощью jQuery

Одной из привлекательных особенностей использования JavaScript в веб-разработке является возможность динамического изменения содержимого HTML-элементов на странице. Особенно полезным это становится, когда есть необходимость обновлять данные на странице без ее полной перезагрузки.

Рассмотрим простой пример. Предположим, на странице есть элемент div с идентификатором «myDiv», который содержит текст «Привет, мир!»

Используя чистый JavaScript, можно изменить содержимое этого div следующим образом:

document.getElementById("myDiv").innerHTML = 'Привет, JavaScript!';

После выполнения этого кода, содержимое div изменится на «Привет, JavaScript!».

Однако, в современной веб-разработке часто используется библиотека jQuery, которая значительно упрощает работу с JavaScript.

С помощью jQuery изменить содержимое элемента div можно следующим образом:

В этом коде $(«#myDiv») — это синтаксис jQuery, который выбирает элемент с идентификатором «myDiv». А html() — это метод jQuery, который устанавливает или возвращает содержимое выбранных элементов. При вызове этого метода без параметров, он возвращает содержимое первого выбранного элемента. Если же передать в этот метод строку, то он заменит содержимое всех выбранных элементов на эту строку.

Таким образом, после выполнения этого кода, содержимое div также изменится на «Привет, jQuery!».

Также стоит отметить, что метод html() в jQuery умеет работать не только с текстом, но и с HTML-разметкой. Это означает, что можно вставлять в элемент не только текст, но и другие HTML-элементы.

Источник