Laconic : JavaScript에서 DOM 컨텐츠를 생성하는 새로운 방법

전통적으로 JavaScript 개발자는

또는

를 사용하여 웹 페이지에 컨텐츠를 주입합니다. 예를 들어 : innerHTML outerHTML (참고 : jQuery는 DOM 조작을 위해

도 활용합니다.) 편리하지만이 방법은 다음과 같은 제한 사항이 있습니다.

<code class="language-javascript">var container = document.getElementById("container");
container.innerHTML = "<p>Here's some new <strong>DOM</strong> content.</p>";</code>

<:> 오류가 발생하기 쉬운 : 잘못된 html은 곤란하기 어려운 오류로 이어질 수 있습니다 브라우저 불일치 : 결과 DOM 노드에 대한 복잡한 작업은 브라우저 별 문제를 일으킬 수 있습니다. 비표준 :

는 W3C DOM 표준이 아닙니다 innerHTML 더 강력하지만 장점에도 불구하고 대안은 DOM 기반 접근법입니다.

이 방법은 표준을 준수하는 동안 상당히 길고 느리게 진행되며 여전히 인간 오류에 취약합니다. 보다 우아한 솔루션을 제공하는 가벼운 유틸리티 인 Laconic을 입력하십시오. HTML에 직접 매핑하는 간결한 JavaScript 구문을 사용합니다.

속성 처리는 객체 리터럴을 사용하여 똑같이 간단합니다
1. laconic은 행복한 매체를 제공합니다.
는 빠른 작업에 적합한 반면
2. 가 문제가 발생할 때 열렬한 탁월합니다. 자세한 내용 및 다운로드는 를 참조하십시오
github 에 적합합니다 간결한 예제 페이지
3. laconic 및 javaScript dom 컨텐츠 생성에 대한 자주 묻는 질문 (FAQ) innerHTML Q :
와

?

의 차이점은 무엇입니까? 는 요소의 HTML 컨텐츠를 직접 설정하여 HTML 파싱으로 인해 사용이 용이 해지지 만 잠재적 인 보안 및 성능 단점을 제공합니다. 반면에 는 프로그래밍 방식으로 DOM 요소를 구축하여 성능과 보안이 향상되지만 더 많은 코드가 필요합니다.

<code class="language-javascript">var newpara = document.createElement("p");
var newstrong = document.createElement("strong");
newstrong.appendChild(document.createTextNode("DOM"));
newpara.appendChild(document.createTextNode("Here's some new "));
newpara.appendChild(newstrong);
newpara.appendChild(document.createTextNode(" content."));

var container = document.getElementById("container");
container.appendChild(newpara);</code>

Q : 및

?

의 현대적인 대안은 무엇입니까? 삽입 지점에 대한보다 정확한 제어를 제공하고 템플릿 리터럴은 클리너 HTML 문자열 생성을 제공합니다. Q : jQuery에서

를 어떻게 사용합니까?

<code class="language-javascript">$.el.p(
    "Here's some new ",
    $.el.strong("DOM"),
    " content."
).appendTo(document.getElementById("container"));</code>

jquery의 함수는 JavaScript의 와 유사하게 작동합니다. 예를 들면 :

var newlement = $ ( '

'); Q : innerhtml <p> vs. <code> createElement ? <code>innerHTML createElement의 장점과 단점 innerhtml 는 단순하지만 느리고 덜 안전합니다. <code> CreateElement

는 더 빠르고 안전하지만 더욱 장점입니다 Q : DOM 컨텐츠 생성에 열정을 사용하는 방법?

Laconic은 DOM 생성을위한 간결한 구문을 제공합니다. 예 : var newlement = $ .el.div ({class : 'myclass'}, 'hello, world!'); document.body.appendChild (NewElement); <code>innerHTML

위 내용은 Laconic : JavaScript에서 DOM 컨텐츠를 생성하는 새로운 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!