createElement/appendChild가있는 자동화 된 tbody가 없습니까?

Question

자바 스크립트를 사용하여 tbody없이 테이블 만들기 createElement/appendChild는 방화범에 tbody를 추가하지 않지만 innerHTML을 사용하면됩니다. 왜? 수동으로 tbody를 추가해야합니까?

Answer 1

DOM 작성 방법을 사용할 때 구조 작성 방법을 원한다고 가정해야합니다.

다른 브라우저에서 동일한 구조를 유지하려는 경우 JavaScript가 HTML을 구문 분석하는 경우에도 항상 수동으로 추가해야합니다. 브라우저가 그 점에서 동일하게 동작하지 않을 수 있으므로 브라우저를 사용하여 삽입하지 마십시오.

---

Here's an example Firefox에서 실행할 수 있습니다.

은 마크 업으로 시작합니다.

<p> 
    <div>original</div> 
</p> 

<div>는 ... 그것은 다음과 같이 렌더링 떠나 HTML 구문 분석됩니다 <p>에서

<p>‌</p> 
<div>original</div> 
<p></p> 

쫓겨 도착하지만 우리는 DOM 방법과 동일한 구조를 만드는 경우, 파이어 폭스는 '아무튼 어떤 수정도하지 마라.

var p = document.createElement('p'); 

p.appendChild(document.createElement('div')) 
    .appendChild(document.createTextNode('new')); 

document.body.appendChild(p); 

그래서 결과 DOM은

<p>‌</p> 
<div>original</div> 
<p></p> 

<p> 
    <div>new</div> 
</p> 

그래서 당신은 당신이 보는 것조차 완전히 잘못된 구조의 경우는 수정을하지 않는 것을 알 수 있습니다 ... 지금이다 HTML을 파싱 할 때.

궁극적으로 브라우저간에 동일한 보장이 없으므로 궁극적으로 일반적인 브라우저 조정 또는 수정에 의존하지 않아야합니다.

잘 구성된 HTML을 사용하면 문제를 피할 수 있습니다.

Answer 2

tbody 요소의 시작 및 끝 태그은 선택 사항이므로, DOM 노드를 직접 조작하여 태그 삽입을 건너 뜁니다.

수동으로 tbody를 추가해야합니까?

다소 주관적입니다.