javascript函数将文本返回到html

我找到了下面的代码片段，希望对它的工作原理有所澄清，因为它解决了我希望做的事情。变量“html”是一个字符串，它是从函数showCard返回的，并作为div放入html代码中。我可以复制它，但是字符串输出返回并以：。。。因此，不创建div，只需将字符串移动到我的HTML中，因为引号保留在div之外

function Card(suit, val, name, symbol)
{
        this.suit = suit;
        this.val = val;
        this.name = name;
        this.symbol = symbol;

    this.showCard =function showCard()
    {
        var html="";
        switch(this.suit)
        {
            case "hearts": suit_text = "♥";
            break;
            case "diamonds": suit_text = "♦";
            break;
            case "spades": suit_text = "♠";
            break;
            case "clubs": suit_text = "♣";
            break;
        }
        html="<div class='card " + this.suit + "'><div class='card-value'>" + this.symbol + "</div><div class='suit'>" + suit_text + "</div><div class='main-number'>"+this.symbol +"</div><div class='invert card-value'>"+this.symbol+"</div><div class='invert suit'>"+suit_text+"</div></div>";
        return html;
    }
}

---

下面是几个示例，说明如何将HTML字符串转换为DOM

如果您希望HTML字符串以任何在

如果希望HTML字符串以开头

如果您开始使用，您可能需要修改上述方法之一。 如果HTML无效，则可能会出现错误

使用上述方法之一后，可以使用parent.appendChildnode_to_be_appended将所需内容附加到所选节点

如果您询问如何创建节点而不是字符串，请使用DOM方法，例如

如果使用createTextNode，HTML将被视为常规文本。最简单的方法是更新节点的innerHTML

功能卡套装、val、名称、符号 { 这套衣服； this.val=val； this.name=名称； 这个符号=符号； this.showCard=函数showCard { var html=； 换这件衣服 { 案例红心：suit_text=&hearts；； 打破 案例钻石：套装文字=&diams；； 打破 案例黑桃：suit_text=&spades；； 打破 案例俱乐部：西服文本=&clubs；； 打破 } html=+this.symbol++suit_text++this.symbol++this.symbol++suit_text+； 返回html； } } var卡=新卡“心”，1，“心”，“心符号”； var container=document.createElement'div'； container.innerHTML=card.showCard； //我们可以插入container div，但实际上并不需要它。 document.querySelector'div'.appendChildcontainer.firstChild； 在此处插入内容

---

您可以使用document.createElement创建外部div，然后使用其innerHTML属性填充HTML的其余部分

function Card(suit, val, name, symbol)
{
        this.suit = suit;
        this.val = val;
        this.name = name;
        this.symbol = symbol;

    this.showCard =function showCard()
    {
        var html="";
        switch(this.suit)
        {
            case "hearts": suit_text = "♥";
            break;
            case "diamonds": suit_text = "♦";
            break;
            case "spades": suit_text = "♠";
            break;
            case "clubs": suit_text = "♣";
            break;
        }
        html="<div class='card-value'>" + this.symbol + "</div><div class='suit'>" + suit_text + "</div><div class='main-number'>"+this.symbol +"</div><div class='invert card-value'>"+this.symbol+"</div><div class='invert suit'>"+suit_text+"</div>";

        var div = document.createElement('div');
        div.classList.add('card');
        div.classList.add(this.suit);
        div.innerHTML = html;
        return div;
    }
}

请注意，在某些情况下，如果不小心输入，使用innerHTML可能会导致安全问题。如果来自用户，请确保用于创建卡片的参数已清除

---

作为附加说明，您可能需要考虑在StPoCub中添加追加操作或将显示卡的名称更改为更能描述其实际操作的内容，即CREATECARD

交换机类似于一系列IFS。请注意，在您共享的代码中，suit_text没有被vard，您不了解这段代码的哪一部分？我看它好像被放入了DOM中：您实际上是如何插入元素的？var html=；只需将变量初始化为空字符串。如果您不喜欢var html，可以将其重写为。。。suit_测试现在是一个全局变量，它的使用方式是如何调用这个函数的？请确保使用新卡正确创建卡实例，并声明变量suit_text。我认为OP不需要片段，他们只需要插入HTMLdirectly@JuanMendes这是一种将字符串转换为DOM的通用方法，可以很容易地附加到文档中。我知道，这很有用，我只是不确定它是否直接解决了这个问题。这太完美了，谢谢。我是JS新手，完全忘记了简单地将showCard返回的html作为innerHTML。谢谢

function html2dom(str) {
    return (new DOMParser).parseFromString(str, 'text/html');
}

function makeNode(tag, attribs, text) {
    var e = document.createElement(tag),
        k;
    if (attribs)
        for (k in attribs)
            e.setAttribute(k, attribs[k]);
    if (text)
        e.textContent = text;
    return e;
}

makeNode('span');
// HTMLSpanElement <span></span>​

makeNode('span', {class: 'foo', id: 'bar'});
// HTMLSpanElement <span class=​"foo" id=​"bar">​</span>​

makeNode('span', {class: 'foo', id: 'bar'}, 'hello world');
// HTMLSpanElement <span class=​"foo" id=​"bar">hello world​</span>​

function Card(suit, val, name, symbol)
{
        this.suit = suit;
        this.val = val;
        this.name = name;
        this.symbol = symbol;

    this.showCard =function showCard()
    {
        var html="";
        switch(this.suit)
        {
            case "hearts": suit_text = "♥";
            break;
            case "diamonds": suit_text = "♦";
            break;
            case "spades": suit_text = "♠";
            break;
            case "clubs": suit_text = "♣";
            break;
        }
        html="<div class='card-value'>" + this.symbol + "</div><div class='suit'>" + suit_text + "</div><div class='main-number'>"+this.symbol +"</div><div class='invert card-value'>"+this.symbol+"</div><div class='invert suit'>"+suit_text+"</div>";

        var div = document.createElement('div');
        div.classList.add('card');
        div.classList.add(this.suit);
        div.innerHTML = html;
        return div;
    }
}

document.body.appendChild(new Card(...).showCard());