javascript 到 HTML 中的隐蔽 html 标签

Question

我正在处理工具提示，我将从后端使用 html 标签获取数据。 我需要在工具提示中显示其相应标签中的相应数据。 例如，我会从后端获取 hello user click here。 我必须以 h1 格式显示为 hello 用户，单击此处应该是一个锚点。 我尝试了这两个功能并替换它不起作用。

使用 function：

<h1 id="data">

</h1>
    function convertToPlain(html){
        var tempDivElement = document.createElement("div");
        tempDivElement.innerHTML = html;
        return tempDivElement.textContent || tempDivElement.innerText || "";
    }
    var htmlString= "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute<a> click here<a></p></div>";
    let dataVal = convertToPlain(htmlString)
    document.getElementById("demo").innerHTML = dataVal;

替换：

https://codesandbox.io/s/serene-fast-u8fie?file=/App.svelte

Answer 1

您在寻找以下结果吗？ 我通过复制粘贴您的代码制作了下面的代码片段，并在convertToPlain function 中更新了 return 语句，我还在htmlString内容中的<a>中添加了href属性。

 function convertToPlain(html) { var tempDivElement = document.createElement("div"); tempDivElement.innerHTML = html; return tempDivElement.innerHTML; } var htmlString = "<div><h1>Bears Beets Battlestar Galactica </h1>\n<p>Quote by Dwight Schrute<a href='#'> click here<a></p></div>"; let dataVal = convertToPlain(htmlString) document.getElementById("demo").innerHTML = dataVal;

 <h1 id="demo"></h1>