반응형
가끔 일을 하다보면 HTML내에서 또 HTML파일을 생성해달라고 하는 (HTML파일 제작툴?) 요청사항이 올 때가 있습니다.
그런 경우에 zxml이라는 라이브러리를 이용해서 구현이 가능합니다.
다운로드 : http://www.nczonline.net/downloads/
압축파일로 되어 있고, 압축을 풀면, sample 소스 등이 나오는데,
실제로 우리가 필요한 건 zxml.js 파일 하나 뿐입니다.
DOM방식으로 구현을 해야되서, 소스가 지저분해질 수 밖에 없더군요.
(다른 좋은 방법이 있으면 소개좀.. ㅠㅠ)
간단하게 예제코드를 통해 작성법을 소개하도록 하겠습니다.
아래 html 코드를 zxml을 통해 만들어 보도록 하겠습니다.
<head> <title>test</title> <meta http-equiv="Cache-Control" content="no-cache" /> </head>
// document 생성
var oXmlDom = zXmlDom.createDocument();
//
var htmlContainer = oXmlDom.createElement("html");
// <head> </head>
var headContainer = oXmlDom.createElement("head");
// <title>test</title>
var titleContainer = oXmlDom.createElement("title");
// 태그 사이에 값을 넣어주는 역할
titleContainer.appendChild(oXmlDom.createTextNode("test"));
// <meta />
var metaContainer = oXmlDom.createElement("meta");
// <meta http-equiv= /> : 속성 추가
var attHttpEquiv = oXmlDom.createAttribute("http-equiv");
// 추가된 속성에 값 추가 <meta http-equiv="Cache-Control" />
attHttpEquiv.value = "Cache-Control";
// meta태그에 위 속성 적용
metaContainer.attributes.setNamedItem(attHttpEquiv);
// <meta http-equiv="Cache-Control" content="no-cache" /> 위와 동일
var attContent = oXmlDom.createAttribute("content");
attContent.value = "no-cache";
metaContainer.attributes.setNamedItem(attContent);
// <head> 안에 title과 meta를 추가
headContainer.appendChild(titleContainer);
headContainer.appendChild(metaContainer);
// 안에 head 추가
htmlContainer.appendChild(headContainer);
// document에 html 추가
oXmlDom.appendChild(htmlContainer);
// 리턴
return oXmlDom.xml;
반응형
'개발 > Front-End' 카테고리의 다른 글
| [Jquery] $.ajax 사용 시 success callback에서 this 객체 사용하기 (0) | 2016.06.10 |
|---|---|
| [CSS] 텍스트 말줄임 (0) | 2016.06.10 |
| [HTML] favicon 추가 (0) | 2016.06.10 |
| [JavaScript] byte formatter (0) | 2016.06.10 |
| [Jquery] Ajax Fileupload Option (0) | 2016.06.10 |
