Question

我正在编写一个从数组创建图像的函数，我需要在javascript字符串中放入一些广泛的HTML。不幸的是，每当我使用括号时，它都会抛弃整个事物。

任何帮助？

此：

listItem.innerHTML = "<img src='" + listData[i] + "'>"; */

这不是：

listItem.innerHTML = "<div class='item square' style='background-image: url(" + listData[i] + ")'></div>";

Answer 1

您的代码取决于listData[i]被投放到三个位置时有效：

CSS url()
CSS
HTML

不应该。在JavaScript中构建HTML并不是一个好主意。如果您确实有足够的标记必须动态构建而无法使用DOM，请使用知道其目标的模板引擎。在这种情况下，大多数情况下，使用DOM！

var itemImage = document.createElement('div');
itemImage.className = 'item square';
itemImage.style.backgroundImage = 'url("' + encodeURI(listData[i]) + '")';
listItem.appendChild(itemImage);

这会创建一个元素，为其某些属性指定值，然后将其附加到listItem，它将始终执行此操作;你不必希望你的报价正确匹配，或者你记得要完全逃避一切。

脚注：围绕encodeURI值的url()和双引号的组合几乎肯定会修复任何潜在的问题 - 引号或括号 - 无论您使用哪种方法添加它们，但这并不是' t表示你应该继续使用innerHTML。

如何在Javascript字符串中使用括号

1 个答案: