.replaceWith( новоеСодержание )
Возвращает: jQuery
Описание: Заменяет каждый элемент в наборе соответствующих элементов с указанным новым содержанием.
.replaceWith( новоеСодержание )
Добавлена в версию: 1.2
Содержание для вставки. Может быть строка HTML, DOM элемент, или объект jQuery.
.replaceWith( функция )
Добавлена в версию: 1.4
функция
Функция, которая возвращает строку HTML для замены в наборе соответствующих элементов.
Метод .replaceWith() позволяет нам удалить содержание из документа и вставить новое содержание на его место за один вызов. Расмотрим следующую структуру DOM:
<div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div> </div>
Мы можем заменить второй внутренний <div> на указанный HTML:
$('.second').replaceWith('<h2>New heading</h2>');
Результатом является структура:
<div class="container"> <div class="inner first">Hello</div> <h2>New heading</h2> <div class="inner third">Goodbye</div> </div>
Мы могли бы в уравнять все внутренние элементы <div> за один раз:
$('.inner').replaceWith('<h2>New heading</h2>');
В результате все заменяются:
<div class="container"> <h2>New heading</h2> <h2>New heading</h2> <h2>New heading</h2> </div>
Или мы могли бы выбрать элемент для использования в качестве замены:
$('.third').replaceWith($('.first'));
Результатом является структура DOM:
<div class="container"> <div class="inner second">And</div> <div class="inner first">Hello</div> </div>
Из этого примера видно, что выбранный элемент замещает целевой будучи передвинутым со своего старого места, а не с помощью клонирования.
Метод .replaceWith(), как и большинство методов jQuery, возвращает объект jQuery так что другие методы могут быть прикрепленны к нему. Вместе с тем следует отметить, что возвращается
В jQuery 1.4 .replaceWith(), .before(), и .after() также могут работать на отключенные узлы DOM. Например, со следующим кодом:
$("<div/>").replaceWith("<p></p>");
Метод .replaceWith() возвращает набор jQuery включающий только параграф.
Примеры
Пример 1
При нажатии ЛКМ, происходит замена кнопки на элемент div с тем же словом. $("button").click(function () {
$(this).replaceWith("<div>" + $(this).text() + "</div>");
});
Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("button").click(function () { $(this).replaceWith("<div>" + $(this).text() + "</div>"); }); }); </script> <style> button { display:block; margin:3px; color:red; width:200px; } div { color:red; border:2px solid blue; width:200px; margin:3px; text-align:center; } </style> </head> <body> <button>First</button> <button>Second</button> <button>Third</button> </body> </html>
Пример 2
Заменяет все параграфы жирными словами.$("p").replaceWith("<b>Paragraph. </b>");
Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("p").replaceWith("<b>Paragraph. </b>"); }); </script> </head> <body> <p>Hello</p> <p>cruel</p> <p>World</p> </body> </html>
Пример 3
Заменяет все параграфы с пустыми элементами div.
$("p").replaceWith(document.createElement("div"));
Пример 3 - Полный код:
<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px solid blue; margin:3px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p").replaceWith(document.createElement("div"));
});
</script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>$("p").replaceWith(document.createElement("div"));</script>
</body>
</html>
Пример 4
По щелчку, заменяет каждый параграф на объект DIV jQuery, который уже в DOM. Обратите внимание это не клонирует объект, а перемещает его, заменяя параграф.Пример 4 - Полный код:
<!DOCTYPE html>
<html>
<head>
<style>
div { border:2px solid blue; color:red; margin:3px; }
p { border:2px solid red; color:blue; margin:3px; cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p").click(function () {
$(this).replaceWith($("div"));
});
});
</script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<div>Replaced!</div>
</body>
</html>
Была ли эта информация полезной?
