M

E

N

U

 

 

манипуляция

текст
text() получает или добавляет текст
HTML код
html() добавляет HTML код и получает HTML код
вставка внутрь
append() добавляет или перемещает элемент внутрь в конец
prepend() добавляет или перемещает элемент внутрь в начало
appendTo() добавляет или перемещает элемент внутрь в конец
prependTo() добавляет или перемещает элемент внутрь в начало
вставка снаружи
after() добавляет или перемещает элемент после выбранного элемента
before() добавляет или перемещает элемент перед выбранным элементом
insertAfter() добавляет или перемещает элемент после выбранного элемента
insertBefore() добавляет или перемещает элемент перед выбранным элементом
обертывание
wrap() обертывает элемент HTML кодом или объектом
wrapInner() обертывает HTML кодом или объектом внутри выбранного элемента
замена
replaceWith() заменяет выбранный элемент
удаление
remove() удаляет элемент
detach() удаляет элемент
empty() удаляет содержимое элемента, не удаляя самого элемента
unwrap() удаляет родительский элемент
клонирование
clone() клонирует элемент
 
 

text()

Функция получает или добавляет текст.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div>
  <p id="p1">Hello World!</p>
  <p>Получаем текст <span id="s1"></span></p>
  <p id="p2"></p>
 </div>
 <script>
  $(document).ready(function () {
   /*получение текста*/
   var a = $('#p1').text();
   $('#s1').text(a);
 
   /*вставка текста*/
   $('#p2').text('Привет Мир!');
  });
 </script>
</body>
</html>
 
 
 

html()

Функция добавляет HTML код и получает HTML код.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <div id="main"></div>
 <textarea></textarea>
 <script>
  $(document).ready(function () {
   /*добавление HTML кода*/
   $('#main').html('<p class="a">Hello World!</p>');
 
   /*получение HTML кода*/
   $('textarea').val($('#main').html());
  });
 </script>
</body>
</html>
 
 
 

append()

Функция добавляет или перемещает элемент внутрь в конец.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <div id="main">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <!-- элемент будет добавлен вот сюда -->
 </div>
 <script>
  $(document).ready(function () {
   $('#main').append('<p class="a">элемент будет добавлен вот сюда</p>');
  });
 </script>
</body>
</html>
 
 
 

prepend()

Функция добавляет или перемещает элемент внутрь в начало.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <div id="main">
  <!-- элемент будет добавлен вот сюда -->
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
 </div>
 <script>
  $(document).ready(function () {
   $('#main').prepend('<p class="a">элемент будет добавлен вот сюда</p>');
  });
 </script>
</body>
</html>
 
 
 

appendTo()

Функция добавляет или перемещает элемент внутрь в конец.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <div id="main">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <!-- элемент будет добавлен вот сюда -->
 </div>
 <script>
  $(document).ready(function () {
   $('<p class="a">элемент будет добавлен вот сюда</p>').appendTo('#main');
  });
 </script>
</body>
</html>
 
 
 

prependTo()

Функция добавляет или перемещает элемент внутрь в начало.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <div id="main">
  <!-- элемент будет добавлен вот сюда -->
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
 </div>
 <script>
  $(document).ready(function () {
   $('<p class="a">элемент будет добавлен вот сюда</p>').prependTo('#main');
  });
 </script>
</body>
</html>
 
 
 

after()

Функция добавляет или перемещает элемент после выбранного элемента.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <div id="main">Hello World!</div>
 <!-- элемент будет добавлен вот сюда -->
 <script>
  $(document).ready(function () {
   $('#main').after('<p class="a">элемент будет добавлен вот сюда</p>');
  });
 </script>
</body>
</html>
 
 
 

before()

Функция добавляет или перемещает элемент перед выбранным элементом.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <!-- элемент будет добавлен вот сюда -->
 <div id="main">Hello World!</div>
 <script>
  $(document).ready(function () {
   $('#main').before('<p class="a">элемент будет добавлен вот сюда</p>');
  });
 </script>
</body>
</html>
 
 
 

insertAfter()

Функция добавляет или перемещает элемент после выбранного элемента.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <div id="main">Hello World!</div>
 <!-- элемент будет добавлен вот сюда -->
 <script>
  $(document).ready(function () {
   $('<p class="a">элемент будет добавлен вот сюда</p>').insertAfter('#main');
  });
 </script>
</body>
</html>
 
 
 

insertBefore()

Функция добавляет или перемещает элемент перед выбранным элементом.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <!-- элемент будет добавлен вот сюда -->
 <div id="main">Hello World!</div>
 <script>
  $(document).ready(function () {
   $('<p class="a">элемент будет добавлен вот сюда</p>').insertBefore('#main');
  });
 </script>
</body>
</html>
 
 
 

wrap()

Функция обертывает элемент HTML кодом или объектом.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <p id="p1">Hello World!</p>
 <p id="p2">Привет Мир!</p>
 <script>
  $(document).ready(function () {
   $('#p1').wrap('<div class="a"></div>');
 
   var a = $('<div />').css({ 'color': '#00F', 'font-size': '24px' });
   $('#p2').wrap(a);
  });
 </script>
</body>
</html>
 
 
 

wrapInner()

Функция обертывает HTML кодом или объектом внутри выбранного элемента.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <div id="main">
  <p>Hello World!</p>
  <p>Привет Мир!</p>
  <p>To be or not to be?</p>
 </div>
 <script>
  $(document).ready(function () {
   $('#main').wrapInner('<div class="a"></div>');
  });
 </script>
</body>
</html>
 
 
 

replaceWith()

Функция заменяет выбранный элемент.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
  <p>Hello World!</p>
 <script>
  $(document).ready(function () {
   $('p').replaceWith('<div class="a">Привет Мир!</div>');
  });
 </script>
</body>
</html>
 
 
 

remove()

Функция удаляет элемент.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
  <div>Hello World!</div>
  <p>To be or not to be?</p>
  <div>Привет Мир!</div>
 <script>
  $(document).ready(function () {
   $('p').remove();
  });
 </script>
</body>
</html>
 
 
 

detach()

Функция удаляет элемент.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <div id="d1">Hello World!</div>
  <p>To be or not to be?</p>
  <div id="d2">Привет Мир!</div>
 </div>
 <script>
  $(document).ready(function () {
   /*удаляет элемент*/
   $('#d1').detach();
 
   /*удаляет элемент с уточнением*/
   $('#main>').detach('#d2');
  });
 </script>
</body>
</html>
 
 
 

empty()

Функция удаляет содержимое элемента, не удаляя самого элемента.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
 <div id="main">
  <p>Hello World!</p>
  <p>To be or not to be?</p>
  <p>Привет Мир!</p>
 </div>
 <script>
  $(document).ready(function () {
   $('#main').empty();
  });
 </script>
</body>
</html>
 
 
 

unwrap()

Функция удаляет родительский элемент.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #F00;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <div class="a">
  <p id="p1">Hello World!</p>
  <p>To be or not to be?</p>
  <p>Привет Мир!</p>
 </div>
 <script>
  $(document).ready(function () {
   $('#p1').unwrap();
  });
 </script>
</body>
</html>
 
 
 

clone()

Функция клонирует элемент.
Скрыть

Показать

Копировать

Выполнить
  index.html  
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>New Страница</title>
 <!-- подключаем библиотеку онлайн через Google CDN -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <style>
  .a {
   color: #00F;
   font-size: 20px;
  }
 </style>
</head>
<body>
 <button>Add</button>
 <div id="main">
  <p class="a">Hello World!</p>
 </div>
 <script>
  $(document).ready(function () {
   $('button').css({ 'cursor': 'pointer' }).click(function () {
    $('#main').append($('.a').clone());
   });
  });
 </script>
</body>
</html>