javascript - 在 JavaScript 中转义 HTML

Question

当我用 JavaScript 构建 HTML 时，我不断地转义双引号。例如

$(wrapper).append("<input type=\"text\" name=\"thingummy[" + id + "]\" data-id=\"" + data_id + "\" id=\"" + id + "_" + data_id + "\" /> <br>"); 

而且，当有很多引号时，我经常会在转义哪些引号时犯错误。结果我花在修复它们上的时间比我想要的还要多。

有没有比我正在使用的方法更好(更快/更安全/更易读)的 HTML 构建方法？

更新

有一个相当重要的点我忘了提及!我使用 PHP 输出此 JavaScript。所以，我有这样的代码:

echo '$(wrapper).append("<input type=\"text\" name=\"thingummy[" + id + "]\" data-id=\"" + data_id + "\" id=\"" + id + "_" + data_id + "\" /> <br>");';

这使得使用单引号成为一个问题('因为它们最终破坏了 PHP!这是我不断遇到的另一个问题，当我忘记我正处于某些 PHP 中间并使用单引号时，如下面评论)。

Answer 1

您也许可以使用templating strings在 JavaScript 中。使用 ${var} 语法将变量插入字符串也变得简单。

echo '$(wrapper).append(`<input type="text" name="thingummy[${id}]" data-id="${data_id}" id="${id}_${data_id}" /> <br>`);';