В этой статье мы увидим пример jquery appendTo() и prependTo. Метод appendTo() вставляет элементы HTML в конец выбранных элементов. Метод prependTo() вставляет элементы HTML в начало выбранных элементов. Методы .append()
и .appendTo()
выполняют одну и ту же задачу. Основное отличие заключается в синтаксисе. В методах .prepend()
и .prependTo()
выполняют одну и ту же задачу. Основное отличие заключается в синтаксисе.
Выражение селектора метода The
.append(), предшествующее методу, является контейнером, в который вставляется содержимое. С другой стороны, с .appendTo()
содержимое предшествует методу либо как выражение селектора, либо как разметка, и оно вставляется в целевой контейнер.
Выражение селектора метода The
.prepend(), предшествующее методу, является контейнером, в который вставляется содержимое. С другой стороны, с .prependTo()
содержимое предшествует методу либо как выражение селектора, либо как разметка. и он вставляется в целевой контейнер.
Пример: метод appendTo()
Синтаксис:
$(content).appendTo(selector);
В этом примере вставьте элемент span в конце каждого тега P при нажатии кнопки.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("<span> Hello, Websolutionstuff !!</span>").appendTo("p"); }); }); </script> </head> <body>
<h3>Jquery appendTo and prependTo Example - Websolutionstuff</h3>
<p>This is a paragraph.</p>
<button>Insert span element at the end of each P tag</button>
</body> </html>
Вывод:
Читайте также: Пример Jquery appendTo и prependTo
Пример: метод prependTo()
Синтаксис:
$(content).prependTo(selector);
В этом примере вставьте элемент span в начале тега P при нажатии кнопки.
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("<span>Hello, Websolutionstuff !! </span>").prependTo("p"); }); }); </script> </head> <body>
<h3>Jquery appendTo and prependTo Example - Websolutionstuff</h3>
<p>This is a paragraph.</p>
<button>Insert span element at the beginning of P tag</button>
</body> </html>
Вам также могут понравиться:
- Читайте также: Laravel 8 Добавить водяной знак на изображение
- Читайте также: Как создать динамическую круговую диаграмму в Laravel 8
- Читайте также: Как динамически добавлять и удалять строки с помощью jQuery