Javascript 变量在代码中的添加位置不同

我有以下代码：

html = html + '<img src="img/loaded.gif" alt="" onload="codeAddress("' + arr[i].loc + '");this.parentNode.removeChild(this);" />';

哪个输出

<img src="img/loaded.gif" alt="" onload="codeAddress(" 304-1477="" west="" pender="" street,="" canada");this.parentnode.removechild(this);"="">

如果我像这样移动变量：

html = html + '</div>' + arr[i].loc + '<img src="img/loaded.gif" alt="" onload="codeAddress("");this.parentNode.removeChild(this);" />';

html = html + '<img src="img/loaded.gif" alt="" onload="codeAddress(\'' + arr[i].loc + '\');this.parentNode.removeChild(this);" />';

我明白了：

304-1477 West Pender Street, canada<img src="img/loaded.gif" alt="" onload="codeAddress(" ");this.parentnode.removechild(this);"="">

为什么输出会根据变量所在的位置而变化？为什么

=

---

添加到第一个输出上的每个空格？

变量与加拿大西彭德街304-1477号完全相同。 在第一种情况下，如果立即输出html：

html = html + '<img src="img/loaded.gif" alt="" onload="codeAddress("' + arr[i].loc + '");this.parentNode.removeChild(this);" />';
console.log(html); // output html immediately

---

试着这样做：

html = html + '</div>' + arr[i].loc + '<img src="img/loaded.gif" alt="" onload="codeAddress("");this.parentNode.removeChild(this);" />';

html = html + '<img src="img/loaded.gif" alt="" onload="codeAddress(\'' + arr[i].loc + '\');this.parentNode.removeChild(this);" />';

---

codeAddress函数中的双勾号导致标记被错误解析

这很难理解，介意将其拆分为多行吗？我决定将其完全保留在文件中，因为我认为它的格式可能会导致问题。您所说的“将变量移到”是什么意思？您是否意识到您的两段代码的差异不仅仅在于空格？这里没有足够的信息来真正理解发生了什么。特别是，codeAddress的代码和arr中的数据都是有用的信息。您包含的输出似乎不是字符串html的内容，而是浏览器解析为html的字符串。您的第一个示例创建了不完整的HTML，因为您在带引号的属性值中有引号。你所看到的是浏览器如何解析破坏的HTML。

html = html + '</div>' + arr[i].loc + '<img src="img/loaded.gif" alt="" onload="codeAddress(' + "''" + '); this.parentNode.removeChild(this);" />'