jQuery - 요소 추가
jQuery를 사용하면 새로운 요소/콘텐츠를 쉽게 추가할 수 있습니다.
새 HTML 콘텐츠 추가
새 콘텐츠를 추가하는 데 사용되는 4가지 jQuery 메서드를 살펴보겠습니다.
append()- 선택한 요소의 끝에 내용을 삽입합니다.prepend()- 선택한 요소의 시작 부분에 내용을 삽입합니다.after()- 선택한 요소 뒤에 내용 삽입before()- 선택한 요소 앞에 내용 삽입
jQuery 추가() 메서드
jQuery append()메서드는 선택한 HTML 요소의 끝 부분에 내용을 삽입합니다.
예시
$("p").append("Some appended text.");
jQuery prepend() 메서드
jQuery prepend()메서드는 선택한 HTML 요소의 시작 부분에 콘텐츠를 삽입합니다.
예시
$("p").prepend("Some prepended text.");
append() 및 prepend()를 사용하여 여러 새 요소 추가
위의 두 예에서는 선택한 HTML 요소의 시작/끝에만 일부 텍스트/HTML을 삽입했습니다.
그러나 append()및 prepend()메서드는 모두 무한한 수의 새 요소를 매개변수로 사용할 수 있습니다. 새 요소는 위의 예에서 수행한 것처럼 텍스트/HTML, jQuery 또는 JavaScript 코드 및 DOM 요소를 사용하여 생성할 수 있습니다.
다음 예에서는 몇 가지 새 요소를 만듭니다. 요소는 텍스트/HTML, jQuery 및 JavaScript/DOM으로 생성됩니다. 그런 다음 메서드를 사용하여 텍스트에 새 요소를 추가합니다 append()(이 방법도 효과가 있었을 것입니다
prepend()).
예시
function appendText()
{
var txt1 = "<p>Text.</p>";
// Create element with HTML
var txt2 = $("<p></p>").text("Text."); // Create with jQuery
var txt3 = document.createElement("p"); // Create with DOM
txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}
jQuery after() 및 before() 메서드
jQuery after()메서드는 선택한 HTML 요소 뒤에 내용을 삽입합니다.
jQuery before()메서드는 선택한 HTML 요소 앞에 콘텐츠를 삽입합니다.
예시
$("img").after("Some text after");
$("img").before("Some text before");
after() 및 before()를 사용하여 여러 새 요소 추가
또한 after()및 before()메서드는 모두 무한한 수의 새 요소를 매개변수로 사용할 수 있습니다. 새 요소는 위의 예에서 수행한 것처럼 텍스트/HTML, jQuery 또는 JavaScript 코드 및 DOM 요소를 사용하여 생성할 수 있습니다.
다음 예에서는 몇 가지 새 요소를 만듭니다. 요소는 텍스트/HTML, jQuery 및 JavaScript/DOM으로 생성됩니다. 그런 다음 메서드를 사용하여 텍스트에 새 요소를 삽입합니다 after()(이 방법도 효과가 있었을 것입니다
before()).
예시
function afterText()
{
var txt1 = "<b>I </b>";
// Create element with HTML
var txt2 = $("<i></i>").text("love "); // Create with jQuery
var txt3 = document.createElement("b"); // Create with DOM
txt3.innerHTML = "jQuery!";
$("img").after(txt1, txt2, txt3);
// Insert new elements after <img>
}
jQuery 연습
jQuery HTML 참조
모든 jQuery HTML 메소드에 대한 전체 개요를 보려면 jQuery HTML/CSS 참조 로 이동하십시오 .