Question

javascript新手，如何解决我遇到的这个问题？

我想在我使用函数创建的字符串变量中添加 a tag 。

整个信息（例如 - ＆＃34;你的导师是JOHN DOE。在这里联系他们：联系表格＆＃34;）用另一个功能（有效）添加到DOM。

当我运行脚本时，它会输出到浏览器，但第二部分（ makeLink（））不起作用。

这就是我得到的： ＆＃34;你的导师是JOHN DOE。请在此处与他们联系http://www.example.com＆＃34; - 而不是我想要的字词联系表格，这应该是一个链接。

我该怎么做？

我尝试使用 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;
    }

Answer 1

看来问题是你从makeLink()函数返回一个DOM元素，这不会像你期望的那样与字符串连接。

您需要返回有效的HTML字符串，例如：<a id=".." href="..">..</a>

修复代码的最快方法就是更改makeLink()函数的返回值，如下所示：

return contactLink.outerHTML;

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

Here is a working example

Answer 2

作为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;
}

Fiddle

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

2 个答案: