javascript函数将文本返回到html答案

【问题标题】：javascript function return text to htmljavascript函数将文本返回到html
【发布时间】：2015-11-14 15:42:46
【问题描述】：

我找到了以下代码 sn-p 并正在寻找有关它如何工作的一些说明，因为它解决了我希望做的事情。变量 '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 = "&hearts;";
            break;
            case "diamonds": suit_text = "&diams;";
            break;
            case "spades": suit_text = "&spades;";
            break;
            case "clubs": suit_text = "&clubs;";
            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;
    }
}

【问题讨论】：

switch 类似于一系列ifs。请注意，suit_text 不是您在此处共享的代码中的 vard
这段代码的哪一部分你不明白？
看起来它正在为我放入 DOM：jsfiddle.net/bz72wkrj 你实际上是如何插入元素的？
var html="";只是将变量初始化为空字符串。如果您不喜欢 var html，可以将其重写为 jsfiddle.net/6ja9sjL2/1...suit_test 现在是一个全局变量，就其使用方式而言
这个函数怎么调用？确保使用new Card(....) 正确创建Card 实例，并声明变量suit_text。

标签： javascript html function

【解决方案1】：

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

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 = "&hearts;";
            break;
            case "diamonds": suit_text = "&diams;";
            break;
            case "spades": suit_text = "&spades;";
            break;
            case "clubs": suit_text = "&clubs;";
            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;
    }
}

var card = new Card('hearts', 1, 'Hearts', 'heart-symbol');
var container = document.createElement('div');
container.innerHTML = card.showCard();
// We could insert the container div, but we don't really need it.
document.querySelector('div').appendChild(container.firstChild);

<div>
  Insert content here
</div>

【讨论】：

这是完美的，谢谢。我是 JS 新手，完全忘记了简单地将来自 showCard 的 html 返回作为 innerHTML。谢谢

【解决方案2】：

这里有几个例子说明如何将 HTML 字符串 转换为 DOM

如果您希望 HTML 字符串 以任何在 <div> 中有效的内容开头

function str2dom(str) {
    var d = document.createElement('div'),
        df = document.createDocumentFragment();
    d.innerHTML = str;
    while (d.childNodes.length)
        df.appendChild(d.childNodes[0]);
    return df;
}

如果您希望 HTML 字符串 以 <doctype>、<html> 开头

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

如果您从<body> 开始，您可能需要修改上述方法之一。
如果您的 HTML 无效，您可能会收到错误

使用上述方法之一后，您可以使用parent.appendChild(node_to_be_appended); 将您想要的内容附加到您选择的节点

如果您询问如何创建 Node 而不是 String，请使用 DOM 方法，例如 document.createElement

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>

【讨论】：

我认为OP不需要片段，他们只是想直接插入HTML
@JuanMendes 它是一种通用方法，可以将 String 转换为 DOM，并且可以轻松附加到文档中
我知道，它很有用，我只是不确定它是否直接解决了问题

【解决方案3】：

您可以使用 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 = "&hearts;";
            break;
            case "diamonds": suit_text = "&diams;";
            break;
            case "spades": suit_text = "&spades;";
            break;
            case "clubs": suit_text = "&clubs;";
            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;
    }
}

然后可以将返回的div 直接传递给document.body.appendChild，如下所示：

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

请注意，在某些情况下，如果您对输入不小心，使用 innerHTML 可能会导致安全问题。如果您用于创建卡片的参数来自用户，请确保其经过净化！

作为附加说明，您可能需要考虑在 showCard 中包含附加操作，或者将 showCard 的名称更改为更能描述其实际功能的名称（即 createCard）

【讨论】：