Question

我目前有一堆看起来像这样的行：

txt = "Can't print the value for <span class='keyword'>"+arguments[1]+"</span> before it's set";

我正在做

$('#mydiv').append($('<div/>').html(txt));

这看起来很糟糕，我需要在参数[1]

中转义任何html

我能想到的唯一选择是确保所有文本都在其自己的元素中：

var spans = [];
spans[0] = $('<span/>').text("Can't print the value for ");
spans[1] = $('<span/>').text(arguments[1]).className('keyword');
spans[2] = $('<span/>').text(" before it's set");
$('#mydiv').append($('<div/>').append(spans[0],spans[1],spans[2]));

这只是一个简单的文本行。还有什么我可以做的吗？

编辑：这不是模板引擎应该处理的事情。它是由javascript日志记录函数生成的html。

Answer 1

如果它是一致的格式，我会将其添加为普通字符串，然后搜索关键字部分。

$('<div/>')
  .appendTo('#mydiv')
  .html("Can't print the value for <span class='keyword'></span> before it's set")
  .find('.keyword').text(arguments[1]);

Answer 2

如果您将继续使用JS创建大量HTML，我建议使用模板库。我是最近的皈依者，我花了很长时间才明白这一点。但是看到许多成功的网站（twitter，github等）和伟大的John Resig promote和/或大量使用模板，我很高兴我坚持尝试理解。现在我懂了。这是为了分离关注点，将逻辑排除在视野之外。

我正在使用这个非常简单的骨骼模板库http://blueimp.github.com/JavaScript-Templates/，尽管underscore.js和mustache.js提供的模板更受欢迎。

我正在使用的库的优点是它非常小，<1kb，如果您熟悉它们，基本上就像编写php / asp代码一样。

您可以在<script>代码中编写HTML而无需转义：

使用您的变量txt，语法如下：

<script>
  var data={txt : "Can't print the value for <span class='keyword'>"+arguments[1]+"</span> before it's set"};

  <div>{%=o.txt%}</div>
</script>

是否有更好的方法来创建元素并在其周围添加文本？

2 个答案: