자바스크립트를 사용하여 요소에 HTML의 큰 덩어리를 삽입하는 모범 사례는 무엇입니까?

자바스크립트를 사용하여 요소에 HTML의 큰 덩어리를 삽입하는 모범 사례는 무엇입니까?

저는 HTML의 큰 덩어리를 DOM에 추가해야 하는 웹 애플리케이션(프로토타입 사용)을 구축하고 있습니다.대부분의 행은 모든 형식의 속성을 가진 요소를 포함합니다.

현재 나는 변수에 HTML의 빈 행을 보관하고 있습니다.

var blankRow = '<tr><td>'
    +'<a href="{LINK}" onclick="someFunc(\'{STRING}\');">{WORD}</a>'
    +'</td></tr>';

function insertRow(o) {
    newRow = blankRow
        .sub('{LINK}',o.link)
        .sub('{STRING}',o.string)
        .sub('{WORD}',o.word);
    $('tbodyElem').insert( newRow );
}

이제 그것은 모두 잘 작동하고 멋집니다. 하지만 이것이 최선의 방법일까요?

페이지에서 코드를 업데이트할 때 빈 행의 코드를 업데이트해야 하므로 삽입되는 새 요소는 동일합니다.빈 행에 40줄 정도의 HTML을 넣고 탈출해야 할 때는 형편없어집니다.

더 쉬운 방법이 있습니까?url 인코딩을 하고 나서 삽입하기 전에 디코딩하는 것을 생각하고 있었지만 여전히 빈 Row와 많은 탈출을 의미합니다.

의미하는 것은 a 함수 aa PHP 등일 것입니다.

$blankRow = <<<EOF
text
text
EOF;

그러면 탈출할 수 없지만 빈 행이 필요합니다.

이 상황에서 당신은 무엇을 합니까?

해결된

프로토타입에 DOM Builder를 사용하게 되었습니다.다른 라이브러리가 필요하지 않았습니다.

$w('a div p span img table thead td th tr tbody tfoot input').each(function(e) {
        window['$' + e] = function() {
            return new Element(e, arguments[0]);
        }
});

newPart = $div({id: 'partition-4'})
    .insert( $p()
        .insert('<b>Stuff</b>')
    )
    .insert( $p({
        id: 'a-p'})
        .insert('<b>More stuff</b>')
    );

$('parentDiv').insert(newPart);

여기 또는 여기에서 내 솔루션을 확인하십시오.

그것이 가장 좋은 방법입니까?

아닙니다. 실제로 HTML 주입 문제로 인해 버그가 발생하고 주입된 문자열에 사용자가 제출한 콘텐츠가 포함될 수 있는 최악의 경우 XSS 보안 구멍이 발생합니다.

일반 텍스트 내용 및 속성 값을 HTML 문자열에 넣을 때 HTML 인코딩을 수행해야 합니다.PHP에서, 당신은 전화해야 합니다.htmlspecialchars()HTML로 입력하는 문자열에서.기능이되어 있지 이스케이핑 기능을 사용하여s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;')HTML에 입력되는 문자열에 있습니다.

="some Func(\'{STRING}\')"를 클릭합니다."

그것은 완전히 새로운 차원의 혼란 탈출입니다.속성 리터럴에서 JS", "JS", "JS")을 JS 인코딩해야 .\- 재 - 는밌escaping는'그리고.\완전성을 위해 유니코드 문자 몇 개를 추가한 다음 결과를 HTML로 인코딩합니다.그렇지 않으면 문자열이 문자열-문자 구분 기호를 벗어나 임의의 JS 코드를 주입할 수 있습니다.모든 경우에 인라인 이벤트 핸들러 특성을 사용하지 않도록 합니다. 특히 템플릿을 사용할 때는 더욱 그렇습니다.

HTML 문자열로 페이지 내용을 작성하는 것은 최악입니다.이스케이프 오류가 발생할 가능성이 매우 높고 응용프로그램의 보안을 손상시킬 수 있습니다.대신 DOM과 같은 방법을 사용하면 이에 대해 걱정할 필요가 없습니다.jQuery를 사용하는 것 같으니 jQuery 1.4 요소 만들기 바로 가기를 사용해 보십시오.

$('<tr>').append(
    $('<td>').append(
        $('<a>', {
            href: o.link,
            text: o.word,
            onclick: function() {
                someFunc(o.string);
            }
        })
    )
);

또는 빈 행을 실제로 HTML로 문서 내부에 유지한 다음 숨깁니다.display: none) 또는 시작 시 문서에서 분리(removeChildor jQuerydetach그런 다음 새 행을 원할 때 빈 행을 복제하고 필요한 내용을 변경합니다.

var blankRow= $('#blankRow').detach();

    ...

var newRow= blankRow.clone();
var link= newRow.find('td>a');
link.attr('href': o.link);
link.text(o.word);
link.click(function() {
    someFunc(o.string);
});

문자열 템플릿에서 내용을 만들어야 하는 경우 템플릿 기능이 기본적으로 모든 대체 항목을 HTML로 이스케이프하도록 하고, 구문 분석된 내용 내에서 호출할 노드를 선택하여 이벤트를 첨부합니다.click(function() { ... })on. 또는 이벤트 위임(예: jQuery)을 사용live()추가 시 새 노드에 바인딩할 필요 없이 이벤트를 처리합니다.

당신은 좋은 방법으로 그것을 하고, 다른 매너를 고려하면 그것은 꽤 빠릅니다.

다른, 아마도 깨끗한 솔루션은 여러 개를 호출하여 사용할 DOM 요소를 자바스크립트로 구축하는 것입니다.

document.createElement(tagName);

하지만 당신의 코드는 빠르게 성장할 것입니다, 제 생각에는, 헛수고입니다.

DOM 생성을 달성하기 위한 또 다른 방법은 복사할 코드를 HTML 본문 안에 넣고 className 및/또는 "template"와 같은 ID를 지정하여 추가로 숨긴 다음 요소를 다시 가져와 복제함으로써 이벤트에서 필요에 따라 처리하는 것입니다.속성이 속한 위치를 추가하기 전에 원하는 속성을 설정합니다.

내가 당신을 잘 이해한다면, 당신의 질문은 당신이 PHP(또는 펄)에서 할 방법으로 큰 문자열을 초기화하는 것입니까?긴(다중 회선) 문자열의 경우 사용:

var blankRow = [
     'a line',
     'another line',
     'still more lines',
     'lines lines lines',
     '... etc'
    ].join('')

백슬래시를 사용하여 계속 진행할 수도 있지만, 이 경우 다음과 같은 문제가 발생할 수 있습니다.

var blankRow = 'a line\
another line\
still more lines\
lines lines lines\
... etc';

주석을 기준으로 편집:저도 게을러요!탈출을 위해 이걸 사용합니다.

function qs(str){
    str = str || this || '';
    return "'"+str+"'";
}

function qd(str){
    str = str || this || '';
    return '"'+str+'"';

}

String.prototype.qs = qs;
String.prototype.qd = qd;

// applied:
var blankRow = [
         'a line',
         'another '+qd('line'),
         'still more lines',
         'lines '+'lines'.qs()+ ' lines',
         '... etc'
        ].join('');

게으른 것의 문제: 게으른 것을 지속하는 것은 꽤 힘든 일입니다.

언급URL : https://stackoverflow.com/questions/2839844/best-practice-for-inserting-large-chunks-of-html-into-elements-with-javascript