기존 행 뒤에 테이블 행 삽입

Question

MVC 응용 프로그램이 있고 페이지 중 하나가 ajax를 통해 컨트롤러 메서드를 호출 한 다음 많은 수의 테이블 행이있는 부분 뷰를 반환합니다. 전체 테이블은 반환되지 않고 테이블 행만 반환됩니다.

테이블의 특정 위치에 테이블 행을 추가해야합니다. 행을 추가해야 할 테이블에 대한 참조가 있습니다 (또는 실제로 새 행이 추가 된 후 참조 된 행이 제거됨). jQuery를이를 사용하는 것은 무지 간단 할 것이다 :

$(newRows).insertAfter(tr); 
tr.remove(); 

문제는 newRows의 HTML은 매우 매우 클 수 있다는 것을 내가 꽤 시간이 걸릴 수 있습니다 jQuery를 통해 그들을 삽입 발견했다. 순수한 자바 스크립트를 통해 jQuery없이 행을 삽입하는 것이 훨씬 빠릅니다.

제 문제는 주어진 테이블 행의 뒤 또는 앞에 새 행을 삽입하는 방법을 생각할 수 없다는 것입니다. insertBefore, insertAfter 및 appendTo 메소드를 시도했지만 문제는 newRows 변수가 실제 HTML 노드가 아닌 html 문자열이라는 것입니다. 테이블 행의 html 문자열을 DOM 요소로 변환하지 않고 참조 테이블 행 앞이나 뒤에 html을 삽입하는 방법이 있습니까?

Answer 1

개체 배열 (json)을 반환하고 JS를 통해 새 행을 만들고이 배열을 사용하여 원하는 위치에 추가 할 수 있습니다.

Answer 2

innerHTML을 사용할 수 있지만 내용을 완전히 덮어 쓰지 않고 행을 추가하기 만하면되기 때문에 약간의 생각이들 것입니다. innerHTML을 사용하면 항상 DOM 조작보다 빠릅니다. 어쩌면 행을 새 테이블에 넣을 수도 있지만 테이블을 기존 테이블의 일부처럼 보이게 만들 수 있습니까? 개인적으로, 나는 jquery 속도에 대해 궁금해서 jquery는 보통 문제의 원인이 아니며 더 많이 사용되는 방법을 발견했습니다.

Answer 3

문자열을 변환하기 위해 수행 할 수있는 작업은 빈 div 문자열을 innerHTML로 설정하십시오. DOM으로 변환되어 div 자식 노드를 통해 액세스 할 수 있습니다. 그건 당신이 당신의 문서 조각을 삽입 할 때

그런 다음 실제 문서에,에 appendChild()

를 사용하여, 그것은 모든 DOM 요소를 삽입하는 대신 여러 하나의 이렇게 하나 개의 삽입을 문서 조각을 사용할 수 있습니다 .

문서 조각에 좋은 조각 http://ejohn.org/blog/dom-documentfragments/