JS 코드의 HTML 생성

Question

내 JS 코드에서 HTML 코드 생성에 대한 귀하의 의견을 알고 싶습니다.

나는 그저 html.push("<tag>" + something + "</tag>") 스타일이 꽤 짜증 스럽다고 생각합니다. 나는 이미 HTML 파일 내부에있는 템플릿을 사용하여 무언가를 시도한 다음 (일부 자리 표시자를 넣은) 내용을 사용하여 자리 표시자를 실제 값으로 대체했습니다.

하지만 어쩌면 너희들도 jQuery를 사용하는 다른 아이디어를 가지고 있을지도 모른다.

Answer 1

jQuery에는 jBind과 jTemplate과 같은 자바 스크립트 템플릿 플러그인이 있습니다. 나는 그들 자신을 사용하지 않았지만 가능할 때마다 jQuery를 추천한다.

HTML 생성에 대한 참고 사항으로 대부분의 경우 검색 엔진에서 검색 할 수 없습니다.

Answer 2

이렇게하려면 createelement, appendchild 및 을 사용할 수 있습니다.

여기에 an article from A List Apart은 드롭 다운 메뉴 생성 과정에서 이러한 기능을 사용합니다.

Answer 3

jQuery가 방법입니다. 이 같은 일을 수행 할 수 있습니다

// create some HTML 
var mySpan = $("<span/>").append("Something").addClass("highlight"); 

• 는 크로스 브라우저 호환,
• 이 구문

또한 templating plugin이 사용하기 쉽습니다.

Answer 4

나는 PrototypeJS이 templates 인 방법에 대한 큰 팬이다.

먼저 Template 클래스의 인스턴스를 만들고 템플릿 HTML을 포함하는 문자열을 전달합니다.

var tpl = new Template('Here is a link to <a href="#{link}">#{sitename}</a>'); 

그런 다음 템플릿에서 바꿀 값이 포함 된 데이터를 전달합니다. 위의 예에서

$('someDiv').innerHTML = tpl.evaluate({link: 'http://www.stackoverflow.com', sitename: 'StackOverflow'}); 

, 나는 ID = "someDiv"와 사업부를하고 난 템플릿 평가 결과와 사업부의 내용을 대체하고있다.

Answer 5

이 기능을 지원하는 JQuery 기능이 많이 있습니다. 특히, 당신은 append(content)에서 appendTo(content)prepend(content)prependTo(content), replaceWith(content), after(content), before(content), insertAfter(content) 및 insertBefore(content)을 보일 것입니다.

Answer 6

매우 가벼운 템플릿 시스템을 만들 때 Resig에는 약간의 blog entry이 있습니다.