jQuery.html()로 소스 가져올 때 닫힘 없어지는 현상 처리

<div class="table-wrap form-table" id="jqueryHtmlTest">

<table class="table table-horizon">

<colgroup>

<col style="width:245px" />

</colgroup>

<tbody>

<tr>

<th>TAB</th>

<td>

jQuer .html<br /><br />테스트

</td>

</tr>

<tr>

<th>버튼</th>

<td>

<button type="button" class="btn" onclick="jqueryTest()">테스트</button>

</td>

</tr>

</tbody>

</table>

</div>

위와 같은 HTML 소스를 jQurery의 .html() 또는 DOM의 InnerHTML로  가져 올경우에 문제점이 있습니다.

<script>

function jqueryTest() {

console.log( $("#jqueryHtmlTest").html() );

}

</script>

이렇게 출력할 경우 결과는

<table class="table table-horizon">

<colgroup>

<col style="width:245px">

</colgroup>

<tbody>

<tr>

<th>TAB</th>

<td>

jQuer .html<br><br>테스트

</td>

</tr>

<tr>

<th>버튼</th>

<td>

<button type="button" class="btn" onclick="jqueryTest()">테스트</button>

</td>

</tr>

</tbody>

</table>

위와 같이 col 이나 br 또는 input 등의 닫힘이 없어 지는 현항이 있습니다.

이 소스를 가지고 PDFWriter을 이용하여 PDF를 만들고자 할 때 오류가 발생합니다.

Invalid nested tag head found, expected closing tag col.

이러한 오류가 발생합니다.

그래서 처리 방법은 new XMLSerializer() 이넘을 이용하는 방법이 있습니다.

<script>

function jqueryTest() {

var oSerializer = new XMLSerializer();

xmlString = oSerializer.serializeToString($("#jqueryHtmlTest")[0]);

console.log( xmlString );

}

</script>

위 소스의 결과는 

<div xmlns="http://www.w3.org/1999/xhtml" class="table-wrap form-table" id="jqueryHtmlTest">

<table class="table table-horizon">

<colgroup>

<col style="width:245px" />

</colgroup>

<tbody>

<tr>

<th>TAB</th>

<td>

jQuer .html<br /><br />테스트

</td>

</tr>

<tr>

<th>버튼</th>

<td>

<button type="button" class="btn" onclick="jqueryTest()">테스트</button>

</td>

</tr>

</tbody>

</table>

</div>

이렇게 출력됩니다.

결과 물을 보면 xmlns="http://www.w3.org/1999/xhtml" 항목이 붙어서 나오게 됩니다.

PDFWriter에서 저 항목이 있으면 생성은 되나 생성된 PDF 파일이 열리지 않는 문제가 있어 저 부분을 삭제 하고 생성하면 정상적으로 생성됩니다.