如何修改此 Javascript 以允许将 HTML 插入到 Button 文本中？答案

【问题标题】：How can I amend this Javascript to allow HTML to be inserted into the Button text?如何修改此 Javascript 以允许将 HTML 插入到 Button 文本中？
【发布时间】：2013-06-08 09:22:52
【问题描述】：

我已经成功地让@PSL 在this answer 上的第一个Javascript 代码工作，并创建了我自己的版本（见下文）。每次单击按钮时，代码基本上都会更改按钮内的文本。但我不能做的是在按钮文本中插入 HTML。当我这样做时，它所做的只是在按钮文本中显示 HTML 代码，而不是执行它。请有人告诉我如何修改下面的 Javascript 以允许每次单击按钮时将 HTML 插入到按钮文本中。谢谢！

例如我正在使用

当前 HTML

<button id="viewPhotosButton" type="button" class="btn btn-large" data-toggle="collapse" data-target="#photos-slide"><i class="icon-align-left icon-chevron-down"></i> View More Photos</button>

Javascript

   $(function(){
$('#viewPhotosButton').click(function(){
    $(this).text(function(i,old){
        return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ?  '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos';
    });
});
});

按钮所需的 HTML（点击后） icon-chevron-down 已更改为 icon-chevron-up 并且 查看更多照片 已更改为 隐藏额外照片

<button id="viewPhotosButton" type="button" class="btn btn-large" data-toggle="collapse" data-target="#photos-slide"><i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos</button>

【问题讨论】：

标签： javascript jquery button twitter-bootstrap

【解决方案1】：

使用html() 而不是text()

$(function(){
$('#viewPhotosButton').click(function(){
    $(this).html(function(i,old){
        return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ?  '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos';
    });
});
});

JSFiddle

【讨论】：

我以为我已经尝试过@c.P.u1 但显然没有！非常感谢！

【解决方案2】：

使用 html() 方法而不是 text() 应该可以工作

$(function(){
    $('#viewPhotosButton').click(function(){
        $(this).html(function(i,old){
            return old=='<i class="icon-align-left icon-chevron-down"></i> View More Photos' ?  '<i class="icon-align-left icon-chevron-up"></i> Hide Extra Photos' : '<i class="icon-align-left icon-chevron-down"></i> View More Photos';
        });
    });
});

【讨论】：

非常感谢@Edorka - 我将 c.P.u1 的回复标记为刚刚出现的答案。非常感谢您的宝贵时间。
别担心，他的解决方案是第一位的，还有一个 JSFiddle 演示。我很乐意提供帮助。

【解决方案3】：

由于问题是用 javascript 而不是 jQuery 标记的，如果有人来这里寻找非 jQuery 答案，这里有一个非 jQuery 替代方案：

button_element = document.getElementById('viewPhotosButton');
button_element.onclick = function() {
    var i_element = button_element.firstChild;
    var old_class = i_element.getAttribute('class');
    if (old_class == 'icon-align-left icon-chevron-up') {
        var new_class = 'icon-align-left icon-chevron-down';
        var new_text = 'View more photos';
    }
    else {
        var new_class = 'icon-align-left icon-chevron-up';
        var new_text = 'Hide photos';
    }
    i_element.setAttribute('class', new_class);
    var old_text_node = i_element.nextSibling;
    var text_node = document.createTextNode(new_text);
    button_element.replaceChild(text_node, old_text_node);
}

【讨论】：