javascript - 使用 .innerhtml 输入带有链接的列表

Question

当我使用 .innerHTML 下面的功能时。该列表出现在我的 ul 元素下，id 为archive_content。唯一的问题是当我将 li 元素转为链接时，该功能不再起作用。我想知道是否有人知道这背后的原因。

function art()
{
//Define art content inside list below 
var archive_content =
"<li>hey</li>"+
"<li>hey</li>"+
"<li>hey</li>"+
"<li>hey</li>";

document.getElementById("archive").innerHTML='Drawings';
document.getElementById("archive_content").innerHTML= archive_content;
}

编辑：这就是我尝试将它们变成链接的方式

  var archive_content =
"<li><a href="#">hey</a></li>" +
"<li><a href="#">hey</a></li>"+
"<li><a href="#">hey</a></li>"+
"<li><a href="#">hey</a></li>";

Answer 1

在以双引号为界的字符串中不能有双引号字符。

"lorem "foo" ipsum" // throws a syntax error
"lorem 'foo' ipsum" // OK

在 JavaScript 中使用单引号来绑定字符串。

var archive_content =
'<li><a href="#">hey</a></li>' +
'<li><a href="#">hey</a></li>' +
'<li><a href="#">hey</a></li>' +
'<li><a href="#">hey</a></li>';

Answer 2

您不应该对 href 和完整字符串都使用双引号。要么：

var archive_content =
'<li><a href="#">hey</a></li>' +
'<li><a href="#">hey</a></li>' +
'<li><a href="#">hey</a></li>' +
'<li><a href="#">hey</a></li>';

或这个：

var archive_content =
"<li><a href='#'>hey</a></li>" +
"<li><a href='#'>hey</a></li>" +
"<li><a href='#'>hey</a></li>" +
"<li><a href='#'>hey</a></li>";

将解决问题。