我知道如何使用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>