javascript - 我知道如何使用 javascript (getElementById) 更改文本，但如何使该文本包含例如。链接？

Question

所以我知道您可以使用 getElementById 更改网页内的文本。 例如这样的事情:

document.getElementById("article").innerHTML = "Search engine is here.";

但是，例如，我该如何使文本可点击。我想到了这样的事情，但这显然行不通:

document.getElementById("article").innerHTML = "<a onclick="myFunction()" href="#">Search engine is here.</a>"

那么，有人知道怎么做吗？您需要使用 jQuery 吗？

Answer 1

它不起作用，因为你有一个语法错误。这与 jQuery 无关。如果您需要在字符串中使用引号，则需要对字符串中的引号进行转义，或者更改引号。您可以在单引号字符串中嵌入双引号，反之亦然，但要在双引号字符串中包含双引号，您需要通过在引号前面添加一个 \ 来转义它们。

以下三个选项中的任何一个都可以解决问题。

转义:

document.getElementById("article").innerHTML = "<a onclick=\"myFunction()\" href=\"#\">Search engine is here.</a>";

JavaScript 中的单引号，HTML 中的双引号:

document.getElementById('article').innerHTML = '<a onclick="myFunction()" href="#">Search engine is here.</a>';

JavaScript 中的双引号，HTML 中的单引号:

document.getElementById("article").innerHTML = "<a onclick='myFunction()' href='#'>Search engine is here.</a>";

另一种方法是通过 JavaScript 真正构建元素。在此代码段中，您不需要转义引号或混合使用单引号和双引号，尽管了解转义仍然是一件好事，因为如果您继续使用 JavaScript，您将不可避免地需要它。

无论如何，出于教育目的:

var div = document.getElementById("article");

// Create a link element
var link = document.createElement('a');

// Set its properties, events and content
link.href = '#';
link.onclick = function() {
  alert('clicked!');
}
link.innerText = 'Text content of the link';

// Add the link to the div
div.appendChild(link);

<div id="article"></div>