프런트 엔드 개발에서 일반적으로 사용되는 JavaScript 라이브러리인 jQuery는 DOM 작업에 있어 강력한 실용성과 편의성을 갖추고 있습니다. 그 중 HTML 요소를 동적으로 추가하는 것은 jQuery의 일반적인 작업 중 하나입니다. 특히 테이블을 조작할 때요소를 동적으로 추가하는 것은 필수입니다.
jQuery에는요소를 추가하는 방법이 많이 있습니다. 아래에서는 참고할 수 있는 몇 가지 일반적인 방법을 소개합니다.
append() 메소드는 지정된 HTML 코드나 요소를 기존 요소의 끝에 추가할 수 있습니다. 따라서 Append() 메소드를 사용하여
$(document).ready(function(){ $("button").click(function(){ $("table").append(""); }); }); 新行的单元格 1 新行的单元格 2
샘플 코드에서 버튼을 클릭하면 새로운
eq() 메서드는 일치하는 요소 컬렉션에서 지정된 인덱스 위치에 있는 요소를 선택할 수 있습니다. 따라서 먼저 지정된
$(document).ready(function(){ $("button").click(function(){ var $cloneRow=$("table tr").eq(0).clone(); $("table").append($cloneRow); }); });
샘플 코드에 테이블의 첫 번째 요소
after() 메소드는 지정된 HTML 코드나 요소를 지정된 요소 뒤에 삽입할 수 있습니다. 따라서 테이블의 지정된 위치에 새
$(document).ready(function(){ $("button").click(function(){ var $newRow=$(""); $("table tr:eq(0)").after($newRow); }); }); 单元格1 单元格2
샘플 코드에서는 새
appendTo() 메소드는 지정된 요소를 다른 지정된 요소의 내부 끝 위치에 삽입할 수 있습니다. 따라서 먼저 새로운
$(document).ready(function(){ $("button").click(function(){ var $newRow=$("").appendTo("table"); }); }); 单元格1 单元格2
샘플 코드에서는 먼저 새로운
실제 개발에서는
위 내용은 jquery가 tr 요소를 추가합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!