时间戳

首页 > 解决方案 > 如何在

javascript - 如何在

问题描述

我从中得到的输出是suscribe herenoobie. 我正在尝试在两者之间添加锚标记h1

let myElement = document.createElement("h1");
let myAttribute = document.createElement("a");
myAttribute.innerText = "noobie";
myElement.innerText = `suscribe ${myAttribute} here`;
myAttribute.classList.add("decoration");
myAttribute.setAttribute("href", "www.peo.com");
myElement.appendChild(myAttribute);
document.body.appendChild(myElement);

截屏

标签： javascripthtml

解决方案

您正在尝试在这里混合一些概念。添加 DOM 节点的正常方法（即您正在创建document.createElement的 DOM 是通过附加appendChild.

innerText另一方面，通过使用，您只是text为一个元素设置值。你不能简单地添加另一个 DOM 元素，比如${myAttribute}里面。这就是为什么你在两者之间看不到它。

有一些方法可以解决这个问题。1）如果您只需要使用节点，请一直使用 DOM 节点并创建文本节点。对于您的示例，您可以为文本和锚节点创建 2 个文本节点，并将它们全部添加到h1正确的顺序中，如下所示：

let myElement = document.createElement("h1");
let textNode1 = document.createTextNode("subscribe "); 
let textNode2 = document.createTextNode(" here");   
let myAttribute = document.createElement("a");
myAttribute.innerText = "noobie";
myAttribute.classList.add("decoration");
myAttribute.setAttribute("href", "www.peo.com");
myElement.appendChild(textNode1);
myElement.appendChild(myAttribute);
myElement.appendChild(textNode2);
document.body.appendChild(myElement);

2）通过添加整个h1内容innerHTML，您可以在其中设置HTML值。现在没有直接的方法将 DOM 节点转换为 HTML，因此您应该直接编写 HTML 而不是从中创建 DOM 节点（请参阅下文了解如何从 DOM 节点创建 HTML）。我不知道您的具体用例以确定您的首选选项是什么：

let myElement = document.createElement("h1");
myElement.innerHTML = `suscribe <a href="www.peo.com" class="decoration">noobie</a> here`;
document.body.appendChild(myElement);

见https://www.w3schools.com/jsref/prop_html_innerhtml.asp

如果您不想或不能这样编写 HTML，您可以通过将其包装在另一个元素中然后获取该innerHTML包装节点的 HTML 来获取您的 DOM 节点的 HTML。您可以在以下答案中看到如何做到这一点： How to get the HTML for a DOM element in javascript

这样您仍然可以通过创建链接，createElement但不需要为文本创建文本节点。这真的取决于你的情况，什么是最适合你的选择。

推荐阅读