JavaScript, HTML, no JQuery - 如何在句子中间添加包含 link 的字符串？

Question

我是 JavaScript 的新手。我正在尝试向 HTML 添加一个段落（最好使用 DOM）。一个段落应该包含一个字符串，一个句子，中间有一个 link。一个段落会根据用户的选择有不同的内容，点击一个按钮就会显示在网页上。我的部分代码与下面粘贴的问题相关。其中 link 将是 'contactThem'.

//Returns a correct text to be displayed in a hidden panel.
function displayText(result) {
    const fR = parseInt(result);
    const contactThem = "<a href='form.html'>form</a>";
    let toInclude = "";
    if (fR < 5) {
        toInclude = "Some text";
    } else {
        toInclude = "Different text" + contactThem + "more text.";
    }
    return toInclude;
}

//Displays hidden panel with contents
function showPanel(displayText) {
    const toShow = displayText;
    const square = document.getElementById("toBeDisplayed");
    while (square.hasChildNodes()) {
        square.removeChild(square.lastChild);
    }
    const yourM = document.createElement("h2");
    let yourMT = document.createTextNode("Title");
    const pp = document.createElement("p");
    let ppT = document.createTextNode(toShow);
    yourM.appendChild(yourMT);
    square.appendChild(yourM);
    pp.appendChild(ppT);
    square.appendChild(pp);
    square.style.visibility = "visible";
}

我怀疑我的方法可能是错误的... 我正在考虑创建 2 个单独的 div 并根据用户的选择显示它们，但如果可能的话我真的宁愿在 JavaScript 中进行。我明白添加 links 作为变量是不正确的。在我找到解决方案之前，它是一个临时持有者。

Answer 1

每当您想在现有元素中添加 HTML 元素时，例如 <a href="http://my_url.com">，您可以使用 HTMLElement.innerHTML = "text that will be rendered"（相对于 HTMLElement.innerText，这将按原样呈现所有内容）。

在你的情况下，它会是这样的：

const contactThem = "<a href='form.html'>form</a>";
let el = document.createElement("p")
el.innerHTML = "Different text" + contactThem + "other text."

JavaScript, HTML, no JQuery - 如何在句子中间添加包含 link 的字符串？

JavaScript, HTML, no JQuery - how to add a string that contains a link in the middle of a sentence?

html

javascript

dom

href

hyperlink