jQuery를, 새로운 요소 / 컨텐츠를 쉽게 추가 할 수 있습니다.
새로운 HTML 콘텐츠 추가
우리는 새로운 내용을 추가하는 데 사용되는 네 가지의 jQuery 방법을 살펴 보겠습니다 :
- append() - 삽입 콘텐츠를 선택된 요소의 끝에
- prepend() - 선택된 요소의 시작 부분에 삽입 콘텐츠
- after() - 선택된 요소 후 내용을 삽입
- before() - 선택된 요소 전에 삽입 콘텐츠
의 jQuery append() 메소드
JQuery와 append() 메소드는 선택한 HTML 요소의 끝 부분에 내용을 삽입합니다.
jQuery를의 prepend() 메소드
JQuery와 prepend() 메소드는 선택한 HTML 요소의 시작 부분에 내용을 삽입합니다.
여러 새로운 요소를 추가 append() 와 prepend()
위의 두 예에서, 우리는 선택한 HTML 요소의 시작 / 끝에서 일부 텍스트 / HTML을 삽입했습니다.
그러나, 모두 append() 및 prepend() 메소드는 매개 변수로 새로운 요소의 무한한 숫자를 취할 수 있습니다. (우리는 위의 예제에서 수행 한 것처럼) 새로운 요소는 jQuery로, 또는 자바 스크립트 코드와 DOM 요소와 텍스트 / HTML로 생성 할 수 있습니다.
다음 예에서 우리는 몇 가지 새로운 요소를 만들 수 있습니다. 요소는 텍스트 / HTML, jQuery를, 자바 스크립트 / 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.";
$("p").append(txt1, txt2, txt3);
// Append the new elements
} »그것을 자신을 시도 jQuery를 after() 와 before() 방법
JQuery와 after() 메소드는 선택한 HTML 요소 AFTER 내용을 삽입합니다.
JQuery와 before() 메소드는 선택한 HTML 요소 전에 내용을 삽입합니다.
몇 가지 새로운 요소와 추가 after() 와 before()
또한, 모두 after() 과 before() 메소드는 매개 변수로 새로운 요소의 무한한 숫자를 취할 수 있습니다. (우리는 위의 예에서 수행 한 것처럼) 새로운 요소는 jQuery로, 또는 자바 스크립트 코드와 DOM 요소와 텍스트 / HTML로 생성 할 수 있습니다.
다음 예에서 우리는 몇 가지 새로운 요소를 만들 수 있습니다. 요소는 텍스트 / HTML, jQuery를, 자바 스크립트 / 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를 HTML 참조
모든 jQuery를 HTML 방법의 전체 개요는, 우리로 이동하시기 바랍니다 jQuery를 HTML / CSS 참조 .