Javascript:添加HTML到字符串-创建一个链接并将其添加到输出

Javascript: Add HTML to string - make a link and add it to output

本文关键字：添加 链接 一个 输出 HTML 字符串 Javascript 创建      更新时间：2023-09-26

新的javascript，我如何解决这个问题，我有?

我想添加一个标签到一个字符串变量，我正在使用一个函数创建。

整个信息(例如-"你的导师是JOHN DOE。在这里联系他们:Contact FORM")通过另一个函数(可以工作)添加到DOM中。

当我运行脚本时，它输出到浏览器，但第二部分(makeLink())不工作。

这是我得到的:"你的导师是JOHN DOE。联系他们在这里http://www.example.com" -而不是URL我想字 Contact FORM这应该是一个链接。

我该怎么做?

我尝试使用link()方法，也不起作用，输出类似。

我将只包括下面的相关脚本，其余的工作很好…

function makeMessage(){
    for(i in msgArr){
        stringMSG += msgArr[i];
        //do not add a comma after last item
        if(i < msgArr.length - 1){
            stringMSG += ', ';
        }

    }

    var highRiskmsg = "Your tutor is " + stringMSG + ". Contact them here" +  makeLink();
    return highRiskmsg;
}

function makeLink() {
    var contactLink = document.createElement("a");//create <a> tag
    contactLink.setAttribute("id", "linkC");//set id att for <a> tag
    contactLink.setAttribute("href", "http://www.example.com/contact.php");//set id att for <a> tag
    var contactLinkTxt = document.createTextNode("CONTACT FORM");//new text node
    contactLink.appendChild(contactLinkTxt);//append text as child of <a> tag
        return contactLink;
    }

似乎问题是您正在从makeLink()函数返回DOM元素，并且这不会与您期望的字符串连接。

您需要返回一个有效的HTML字符串，例如:<a id=".." href="..">..</a> 修复代码的最快方法是更改makeLink()函数的返回值，如下所示: 
return contactLink.outerHTML;

使用outerHTML将返回元素的HTML字符串，而不是元素本身。

下面是一个工作示例

作为musefan的答案的替代方案，您可以返回一个元素，其中包含消息和链接作为节点，而不是文本。

function makeMessage(){
    var highRiskmsg = "Your tutor is " + msgArr.join(',') + ". Contact them here";
    var span = document.createElement('span');
    span.appendChild(document.createTextNode(highRiskmsg));
    span.appendChild(makeLink());
    return span;
}

小提琴

相关文章：