Question

我正在尝试在元素中添加HTML，但是我在转义引号等方面遇到了严重的问题。

我尝试了很多东西，我甚至没有得到斜线，这就是它的样子:(我删除了任何逃避的尝试，因为它让它更加混乱）

document.getElementById("sharerContainer").innerHTML =
    "<div onclick='teleport('justwalk.it/house?uid=" + sharerID +
    "')'><div class='face' style='background-image: url('https://graph.facebook.com/" +
    sharerFID + "/picture');'></div>" + sharer;

还有另一种通过javascript编写HTML来减少此类问题的方法吗？

Answer 1

document.getElementById("sharerContainer").innerHTML =
"<div onclick=\"teleport('justwalk.it/house?uid=" + sharerID +
"');\"><div class=\"face\" style=\"background-image: url('https://graph.facebook.com/" +
sharerFID + "/picture');\"></div>" + sharer;

或者你可以试试jQuery

Answer 2

然后使用DOM操作（无论如何你应该更喜欢）：

var container = document.getElementById("sharerContainer");

var div = container.appendChild(document.createElement('div'));
div.onclick = function() {
    teleport("justwalk.it/house?uid=" + encodeURIComponent(sharerID));
};

var inner_div = div.appendChild(document.createElement('div'));
inner_div.style.backgroundImage = "url('https://graph.facebook.com/" + sharerFID + "/picture');";
inner_div.className = 'face';

div.appendChild(document.createTextNode(sharer));

目前尚不清楚这些变量的内容是什么，因此您可能需要稍微调整一下以使其适合您。

Answer 3

为什么不能像以前那样只进行正常的DOM操作：

var sharerContainer = document.getElementById('sharerContainer');
var myDiv = document.createElement('div');
var subDiv = document.createElement('div');
subDiv.appendChild(document.createTextNode(sharer);
myDiv.appendChild(subDiv);
sharerContainer.appendChild(myDiv);

myDiv.onclick = function() {
    teleport('justwalk.it/house?uid=' + sharerID);
};

在Element中添加HTML可以减少转义问题

3 个答案: