В этой статье мы увидим пример 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>

Вам также могут понравиться: