javascript - 在 JavaScript 中创建链接，并将其集成到 createTextNode()

Question

我希望将链接集成到创建的文本节点中，但出现的只是文本(标题)，而不是链接。我该如何解决这个问题？

函数中的代码:

function createMessage() {
   var a = document.createElement('a');
   var linkText = document.createTextNode("http://www.example.com");
   a.title = "http://www.example.com";
   a.href = "http://www.example.com";
   var message2 = document.createElement("p");
   var message2text = document.createTextNode("Website: " + a + ".");
   message2.appendChild(message2text);
   var olElem = document.getElementById("display");
   var old = document.getElementById("display");
   var display = old.parentNode;
   return display.replaceChild(message2, olElem);
}

Answer 1

这里的问题:

var message2text = document.createTextNode("Website: " + a + ".");
// ---------------------------------------------------^^^^^^^

您无法将 DOM 元素附加到字符串并获得有用的结果。

很难弄清楚您要在代码中做什么，但是要创建一个包含链接的段落，最简单的方法是 innerHTML:

var p = document.createElement('p');
p.innerHTML = 'Website: <a href="http://example.com" title="http://example.com">http://example.com</a>.';

...然后在需要的地方追加/插入它。

但是如果你想一点一点地做，那就是:

var a = document.createElement('a');
a.href = "http://example.com";
a.title = "http://example.com";
a.appendChild(document.createTextNode("http://example.com"));
var p = document.createElement('p');
p.appendChild(document.createTextNode("Website: "));
p.appendChild(a);
p.appendChild(document.createTextNode("."));

...然后在需要的地方追加/插入它。请注意我们必须如何创建三个单独的文本节点:链接前的文本、链接内的文本以及链接后的文本。