使用 Javascript 将大块 HTML 插入元素的最佳实践？

Question

我正在构建一个需要在 DOM 中添加大量 HTML 的 Web 应用程序（使用原型）。其中大部分是包含具有各种属性的元素的行。

目前我在一个变量中保留了一行空白的 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 );
}

现在这一切都很好，而且很好，但这是最佳做法吗？

当我更新页面上的代码时，我必须更新blankRow中的代码，因此插入的新元素是相同的。当我有 40 行 HTML 进入一个 blankRow 时，它会变得很糟糕，然后我也必须转义它。

有没有更简单的方法？我正在考虑 urlencoding，然后在插入之前对其进行解码，但这仍然意味着空白行和大量转义。

什么意思是 eof 函数 a la PHP et al.

$blankRow = <<<EOF
text
text
EOF;

这意味着没有转义，但它仍然需要一个空白行。

遇到这种情况你会怎么做？

已解决

最终在原型中使用了 DOMBuilder。不需要其他库：

$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);

请参阅我的解决方案 here 或 here。

Answer 1

你用一种很好的方式来做这件事，考虑到其他方式，这很快。

另一种可能是干净的解决方案是在 javascript 中构建您要使用的 DOM 元素，方法是调用几个

document.createElement(tagName);

但在我看来，你的代码会迅速增长，但不会白费。

另一种，我最喜欢的实现 DOM 创建的方法，是将要复制的代码放在 HTML 正文中，给它一个 className 和/或像“模板”这样的 id，这将另外（使用 css）隐藏它，然后根据需要在事件上处理它，方法是取回元素，克隆它，并在附加它所属的位置之前设置你想要的属性

Answer 2

如果我理解你的话，你的问题是关于初始化大字符串的方式，你将在 PHP（或 Perl 中）这样做？对于我使用的长（多行）字符串：

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('');

懒惰的问题：坚持一个人的懒惰是相当困难的工作

Answer 3

这是最佳做法吗？

没有。实际上，您遇到了导致错误的 HTML 注入问题，并且在最坏的情况下，注入的字符串可能包含用户提交的内容，XSS 安全漏洞。

当您将纯文本内容和属性值放入 HTML 字符串时，您必须对它们进行 HTML 编码。在 PHP 中，您必须在进入 HTML 的字符串上调用 htmlspecialchars() 来执行此操作。在 JavaScript 中，您没有内置的 HTML 转义功能，因此您必须自己制作，例如。通过在进入 HTML 的字符串上使用 s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"')。

onclick="someFunc(\'{STRING}\');"

这是一个全新的逃避混乱的水平。在事件处理程序属性内的 JavaScript 字符串文字中，您必须对字符串进行 JS 编码（\-escaping ' 和 \ 加上一些 Unicode 字符以确保完整性）然后对结果进行 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）或在开始时将其从文档中分离（removeChild 或 jQuery detach）。然后，当您需要新行时，克隆空白行并进行所需的更改：

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() { ... })。或者使用事件委托（例如 jQuery live()）来处理事件，而无需在添加时绑定到新节点。