Работа с DOM

jQuery содержит набор методов значительно упрощающих взаимодействие с DOM.

Методы, которые будут рассмотрены в данной главе могут применяться и для HTML и для XML документов.

Изменение содержимого элементов с помощью jQuery

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

Синтаксис:

//Узнаем содержимое выбранного элемента
$("селектор").html();
//Изменим содержимое выбранного элемента
$("селектор").html("новое содержимое");

Пример

$(document).ready(function(){

   $("#but1").click(function(){
      $("#par1").html("jQuery - это JavaScript библиотека, значительно 
      упрощающая написание кода.");
   });
   $("#but2").click(function(){
      $("#par2").html("jQuery значительно облегчает взаимодействие с DOM.");
   });
   $("#but3").click(function(){
      alert($("#par1").html());
   });
   $("#but4").click(function(){
      alert($("#par2").html());
   });

});

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

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

Синтаксис:

//Добавим текст после внутреннего содержимого элемента
$("селектор").append("произвольный текст");
//Добавим текст перед внутренним содержимым элемента
$("селектор").prepend("произвольный текст");

Пример

$(document).ready(function(){
  
   $("#but1").click(function(){
      $("#par1").prepend("jQuery - это  ");
   });
   $("#but2").click(function(){
      $("#par1").append(" значительно упрощающая написание кода.");
   });
   $("#but3").click(function(){
      $("body").append("
Я добавленный абзац.
");
   });
});

С помощью метода attr() Вы можете узнать или изменить содержимое указанного атрибута у выбранного элемента.

С помощью метода removeAttr() Вы можете удалить указанный атрибут у выбранного элемента.

//Узнаем значение произвольного атрибута
$("селектор").attr("атрибут");
//Установим новое значение произвольному атрибуту
$("селектор").attr("атрибут", "новое значение");
//Удалим атрибут
$("селектор").removeAttr("атрибут");

Пример

$(document).ready(function(){

   $("#but1").click(function(){
      alert($("#anchor1").attr("href"));
   });
   $("#but2").click(function(){
      $("#anchor1").attr("href"," ");
   });
   $("#but3").click(function(){
      $("#anchor1").removeAttr("href");
   });
});

Метод wrap позволяет "обернуть" выбранный элемент указанными тэгами.

$("селектор").wrap("<нач_тэг><кон_тэг>");

Пример

$(document).ready(function(){

   $("#but1").click(function(){
       $("#par1").wrap("");
   });
   $("#but2").click(function(){
       $("#par2").wrap("");
   });
   $("#but3").click(function(){
       $("#par3").wrap("
");
   });

});