Question

在某些情况下，我需要通过JavaScript构建一个字符串以附加到HTML元素。

我的方法通常是做这样的事情：

document.getElementById('theID').innerHTML=document.getElementById('theID').innerHTML+'<li>theString</li>';

，除非附加的字符串是包含JavaScript变量和文本的高级HTML，否则它将正常工作。在这些情况下，除非它仍然具有代码间距（空格），否则它将变得混乱。

我想要的例子：

document.getElementById('theID').innerHTML=
document.getElementById('theID').innerHTML+
"<ul>
  <li><a href='"+varLink+"'>"+var1+"</a></li>
</ul>";

我的问题是它不能有任何空格，或者我在页面加载时得到一个未终止的字符串文字。即使是用于连接的'+'之前和之后的空格也会导致错误。如果我从字符串中删除所有空格，那么它工作正常，但就像我说的那样，很难维护/编辑。

首先，有没有更好的方法通过jQuery执行此操作，在页面加载时不会生成相同的错误？除非这样，是否有一些方法可以获得空格而不获得未终止的字符串文字？

Answer 1

你可以使用单个\来逃避，但它不是一个好主意，因为它不属于标准;

var s ="<ul> \r\n\
  <li><a href='"+varLink+"'>"+var1+"</a></li> \r\n\
  bla bla bla \r\n\
</ul>";

唯一的另一种方法是单独连接字符串的每个部分使用数组可以高效/可读;

var buff = [];
buff.push("<li>...");
buff.push("</ul>");
document.getElementById('theID').innerHTML += buff.join("\r\n");

Answer 2

你的问题不是空格，它在字符串中间断行。您可以使用\来解决这个问题，但正如Alex K所提到的那样，这是非标准的。

为了它的价值，我会做这样的事情。

document.getElementById('theID').innerHTML += [ 
"<ul>",
  "<li><a href='", varLink, "'>", var1, "</a></li>",
"</ul>"
].join('');

创建一个数组，连接值并将它们附加到innerHTML。您可以添加空白空间以进行演示而不会出现错误。

P.S。这基本上是亚历克斯K的一些调整的答案，我赞成他的。

Answer 3

我不知道这是否能回答你的问题，但如果你想要空间，你需要使用+，我知道如何让它工作就像

document.getElementById('theID').innerHTML += 
 document.getElementById('theID').innerHTML = 
 "<ul>"+
 "  <li><a href='"+varLink+"'>"+var1+"</a></li>"+
 "</ul>";

 }

Answer 4

jQuery等价物将更整洁：

$（ '＃theID'）附加（...）;

Javascript错误 - 如果连接字符串中有空格，则连接时未终止字符串文字

4 个答案: