javascript来识别它再次被单击，以反转最初单击时所做的更改

我有一点JavaScript，当我按下页面上的按钮时就会触发。按下时，它触发一个运行此代码的事件，并将样式文本转换为html源代码：

showHTMLmarkupCode: function(e) {
    var text = document.createTextNode($('.storyBookText').html());
    var html = $('.storyBookText').html();
    $('.storyBookText').empty();
    $('.storyBookText').append(text);
}

当你第一次按下按钮时，它就工作了

如果我有这样的文本：

这是粗体的

当我按下按钮时，它将显示：

<span style="font-weight: bold;">This is bold</span>

有没有一种方法可以对它进行编码，这样当第二次按下它时，它会恢复为样式文本而不是丑陋的代码

谢谢

修改功能：

showSourceCode: function(e) {
    console.log('show source code clicked');
    console.log("isHTML: ", isHTML);
    if (isHTML) {
        $('.storyBookText').textContent = $('.storyBookText').innerHTML;
    } else {
        $('.storyBookText').innerHTML = $('.storyBookText').textContent;
    }
    isHTML = !isHTML;
}

---

通过将父对象的属性设置为其属性，可以完成文本到HTML的转换：

const$button=document.getElementById（'button'）；
const$element=document.querySelector（'.storyBookText'）；
让isHTML=true；
$button.addEventListener（'单击'，（）=>{
如果（isHTML）{
$element.textContent=$element.innerHTML；
}否则{
$element.innerHTML=$element.textContent；
}
isHTML=！isHTML；
});

这是大胆的
更改
谢谢您的示例！我是否能够替换代码并在原始showHTMLmarkupCode函数中使用if-else语句？当然可以。请注意，您需要在函数之外定义
isHTML
变量，以便在函数调用之间从
HTML->text
或
text->HTML
进行转换时，它可以跟踪。谢谢，我这样做了，并将修改后的函数添加到了上面的原始问题中。但现在，当我点击时，它什么也不做。我添加了2个console.log行，单击时确实可以看到这些行。当我点击时，我也看到isHTML从true变为false…所以我不知道为什么它不起作用。如果你能更新你的问题以包括a，那将是很有帮助的，也许我们可以一起深入了解这个问题。
showSourceCode: function(e) {
    console.log('show source code clicked');
    console.log("isHTML: ", isHTML);
    if (isHTML) {
        $('.storyBookText').textContent = $('.storyBookText').innerHTML;
    } else {
        $('.storyBookText').innerHTML = $('.storyBookText').textContent;
    }
    isHTML = !isHTML;
}