Манипуляция с элементами в jQuery. Часть 1

Дата публикации: 2016-12-23

Манипуляция с элементами в jQuery

От автора: приветствую вас, друзья. В этой статье мы начнем знакомиться с методами, позволяющими осуществлять манипуляции с элементами DOM, а именно: добавление, удаление и изменение элементов DOM.

Для практической работы нам потребуется несколько элементов верстки, к примеру такой:

<div class="container content">
	<img src="//lorempixel.com/400/200/city" alt="" id="img1" width="400" height="200
">
	<p>Lorem ipsum dolor sit amet.</p>
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

<img src="//lorempixel.com/400/200/city" alt="" id="img1" width="400" height="200

<p>Lorem ipsum dolor sit amet.</p>

<ul>

</ul>

</div>

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

Например, получим весь html-код блока content:

$(function(){
	var content = $('.content').html();
	console.log(content);
});

$(function(){

var content = $('.content').html();

console.log(content);

});

Манипуляция с элементами в jQuery

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

$(function(){
	$('.content ul').html('<li><a href="#">Первый элемент списка</a></li><li><a href="#">Второй элемент списка</a></li>');
});

$(function(){

$('.content ul').html('<li><a href="#">Первый элемент списка</a></li><li><a href="#">Второй элемент списка</a></li>');

});

Манипуляция с элементами в jQuery

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

$(function(){
	var text = $('.content').text();
	console.log(text);
});

$(function(){

var text = $('.content').text();

console.log(text);

});

Манипуляция с элементами в jQuery

А теперь попробуем заменить текст в элементах списка:

$('.content li a').text('Новый текст');

1	$('.content li a').text('Новый текст');

Манипуляция с элементами в jQuery

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

На этом текущая статья завершена. Больше о jQuerу вы можете узнать из наших уроков или курса. Удачи!

Метки: jquery