-1

我在 javascript 中创建一个 html 字符串时遇到了一些问题。它将引号放在错误的位置，坦率地说，它看起来不像是一种非常优雅的方式。有没有更简洁的方法来创建下面的 html？有人可以拍摄一个例子吗？

 $(filterList).append('<li id=\'' + filterItemId  + '\'data-icon=\'delete\'><a onclick=' + '\'removeFilterItem(\'' + filterItemId + '\'' + ')\'>' + name + '</a></li>').listview('refresh');

我正在尝试制作一个看起来像..的html字符串（由上面的变量创建）

<li id="someId" data-icon="delete"><a onclick="removeFilterItem('someId')">Jack</a></li>
4

6 回答 6

3

使用这两种类型的引号来构建字符串没有任何问题：

$(filterList).append("<li id='" + filterItemId  + "' data-icon='delete'><a onclick='removeFilterItem('" + filterItemId + "' \>" + name + "</a></li>").listview('refresh');
于 2012-12-06T15:51:25.573 回答
1

您可以将双引号与单引号互换使用，以避免在其内部转义单引号。

$(filterList).append('<li id="' + filterItemId  + '"data-icon="delete"><a onclick="removeFilterItem(\'' + filterItemId + '\')">' + name + '</a></li>').listview('refresh');
于 2012-12-06T15:52:42.430 回答
1

在 JavaScript 中，您可以使用单引号或双引号，在这种情况下，我通常会在字符串外部使用单引号，在字符串内部使用双引号。如果你发现你需要经常这样做，特别是如果 html 更复杂，你可能需要考虑使用某种 js 模板解决方案。

对于您的示例，以下内容应该有效

$(filterList).append('<li id="' + + filterItemId  + '" data-icon="delete"><a onclick="removeFilterItem(' + filterItemId + ')">' + name + '</a></li>').listview('refresh');
于 2012-12-06T15:54:28.630 回答
0

使用 jquery 来设置您的属性，而不是尝试编写字符串。这样您就不必担心字符串转义。

var $li = $("<li>");
var $a = $("<a>");

$a.appendTo($li);

$li.attr("id", someID);

$a.attr("onclick", "...");

// ...
$(filterList).append($li);

等等。

于 2012-12-06T15:50:58.970 回答
0

您可以使用双引号并预先计算一些字符串：

 var script = "removeFilterItem('" + filterItemId + "');"
 $(filterList).append(
    '<li id="' + filterItemId + '" data-icon="delete">'
    + '<a onclick="'+script+'">' + name + '</a>'
    + '</li>'
 ).listview('refresh');

另请注意，缩进和分解也简化了任务（和维护）。

于 2012-12-06T15:52:01.107 回答
0 
var li = document.createElement("li");
li.id = "someId";
li.setAttribute("data-icon", "delete");
var a = document.createElement("a");
a.onclick = function() { removeFilterItem('someId'); };
li.appendChild(a);

我认为没有太多要解释的。

于 2012-12-06T15:52:25.653 回答