Question

我正在构建一个锚标记，如下所示：

$('<a href="javascript: void(0)" xml = "' + MapLayerSourceInfo + '"onclick=" EditXmlDataEditor(this)">Edit</a>').appendTo(container);

如果MapLayerSourceInfo的值为＆lt; source_info＆gt;＆lt; / source_info＆gt;我得到以下，这就是我想要的。

<a href="javascript: void(0)" xml="<source_info></source_info>" onclick=" EditXmlDataEditor(this)">&lt;......&gt;</a>

但是，如果MapLayerSourceInfo的值为＆lt; source_info /＆gt;，则jQuery appendTo会给我这样的信息：

<a href="javascript: void(0)" xml="<source_info></a>" onclick=" EditXmlDataEditor(this)">&lt;......&gt;</a>

它添加了锚点的结束标记。我该如何防止这种情况？

Answer 1

您应该转义字符串或使用不同的语法来创建元素：

$('<a>', {
    xml: MapLayerSourceInfo,
    text: 'Edit',
    href: '#',
}).appendTo(container);

http://jsfiddle.net/mgm7egcq/

使用上面的语法强制jQuery使用场景后面的attr方法。作为建议，避免使用onclick属性，这会使您的代码无法维护，通常是一种不好的做法。对于动态生成的元素，您可以委派事件。

Answer 2

你必须在html属性中逃避你的角色，你可以使用像下划线逃脱或写自己的东西

http://underscorejs.org/#escape

所以你需要做的是

$('<a href="javascript: void(0)" xml = "' + escape(MapLayerSourceInfo) + '"onclick=" EditXmlDataEditor(this)">Edit</a>').appendTo(container);

逃避就像：

function escapeHTML(s) { 
    return s.replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

基本上dom中的任何xml字符都会被解释为这样，浏览器会尝试修复dom因为它们是它的一部分，所以如果你逃脱它们你应该没问题。不要担心像$("selector for your link").attr("xml")这样的js会返回原始的xml。

Answer 3

您可以将<source_info/>转换为<source_info></source_info>

    if (MapLayerSourceInfo == "<source_info/>"){
 MapLayerSourceInfo = "<source_info></source_info>"}

jQuery appendTo - 阻止添加结束标记

3 个答案: