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>";

将解决问题。

使用.innerhtml输入包含链接的列表

2 个答案: