[javascript] innerHTML에 비해 createElement의 장점은 무엇입니까?

innerHTML더 빠를 수 있지만 가독성이나 유지 관리 측면에서 더 좋다는 데 동의하지 않습니다. 모든 것을 하나의 문자열에 넣는 것이 더 짧을 수 있지만 코드가 짧다고 항상 유지 관리가 더 쉬운 것은 아닙니다.

문자열 연결은 더하기 ‘와 따옴표 열기 및 닫기를 추적하기 어려워 지므로 동적 DOM 요소를 만들어야하는 경우에만 확장되지 않습니다. 다음 예를 고려하십시오.

결과 요소는 콘텐츠가 동적 인 두 개의 내부 범위가있는 div입니다. 첫 번째 범위 내의 클래스 이름 (전사) 중 하나도 동적입니다.

<div>
    <span class="person warrior">John Doe</span>
    <span class="time">30th May, 2010</span>
</div>

다음 변수가 이미 정의되어 있다고 가정합니다.

var personClass = 'warrior';
var personName = 'John Doe';
var date = '30th May, 2010';

innerHTML 만 사용하고 모든 것을 단일 문자열로 매싱하면 다음을 얻을 수 있습니다.

someElement.innerHTML = "<div><span class='person " + personClass + "'>" + personName + "</span><span class='time'>" + date + "</span></div>";

위의 혼란은 매번 문자열을 열고 닫지 않도록 문자열 교체를 사용하여 정리할 수 있습니다. 간단한 텍스트 교체의 경우에도 replace문자열 연결 대신 사용 하는 것을 선호합니다 .

이것은 키와 대체 값의 객체를 가져와 문자열에서 대체하는 간단한 함수입니다. 키가 $특수 값임을 나타 내기 위해 접두사가 붙은 것으로 가정합니다 . $대체 값 등에 나타나는 이스케이프 또는 가장자리 케이스를 처리하지 않습니다 .

function replaceAll(string, map) {
    for(key in map) {
        string = string.replace("$" + key, map[key]);
    }
    return string;
}

var string = '<div><span class="person $type">$name</span><span class="time">$date</span></div>';
var html = replaceAll(string, {
    type: personClass,
    name: personName,
    date: date
});
someElement.innerHTML = html;

객체를 구성하는 동안 속성, 텍스트 등을 분리하여 요소 구성을보다 프로그래밍 방식으로 제어함으로써 개선 할 수 있습니다. 예를 들어 MooTools를 사용하면 객체 속성을 맵으로 전달할 수 있습니다. 이것은 확실히 더 유지 관리가 가능하며 더 읽기 쉽다고 주장합니다. jQuery 1.4는 유사한 구문을 사용하여 DOM 객체를 초기화하기위한 맵을 전달합니다.

var div = new Element('div');

var person = new Element('span', {
    'class': 'person ' + personClass,
    'text': personName
});

var when =  new Element('span', {
    'class': 'time',
    'text': date
});

div.adopt([person, when]);

아래의 순수한 DOM 접근 방식을 위의 것보다 더 읽기 쉽게 부르지는 않겠지 만 여는 / 닫는 따옴표와 수많은 더하기 기호를 추적 할 필요가 없기 때문에 확실히 유지 관리가 더 쉽습니다.

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

var person = document.createElement('span');
person.className = 'person ' + personClass;
person.appendChild(document.createTextNode(personName));

var when = document.createElement('span');
​when.className = 'date​​​​​​';
when.appendChild(document.createTextNode(date));

​div.appendChild(person);
div.appendChild(when);

가장 읽기 쉬운 버전은 일종의 자바 스크립트 템플릿 을 사용한 결과 일 가능성이 큽니다 .

<div id="personTemplate">
    <span class="person <%= type %>"><%= name %></span>
    <span class="time"><%= date %></span>
</div>

var div = $("#personTemplate").create({
    name: personName,
    type: personClass,
    date: date
});