如何<span>使用 Javascript 更改元素的文本而不<span>消失？</span></span>

Question

我有一个非常简单的问题，但这是我以前没有做过的事情。

我的 HTML 中有<span>↑</span> ：

<div class="button--up-down" data-type="up">
    <span>↑</span>
</div>

但我的 JS 中没有<span>↑</span> ：

var lastPageScroll = 0;
$(document).on('click', '.button--up-down', function () {
    var type = $(this).attr('data-type');
    var speed = 0; //ms

    if (type == 'up') {
        lastPageScroll = $("body,html").scrollTop();
        if (lastPageScroll > 0) $(this).attr('data-type', 'down').text('↓');
        $("body,html").animate({
            scrollTop: 0
        }, speed);
    }
    if (type == 'down') {
        $(this).attr('data-type', 'up').text('↑');
        $("body,html").animate({
            scrollTop: lastPageScroll
        }, speed);
    }
});
$(document).on('scroll', function () {
    var $button_up_down = $('.button--up-down');
    var type = $button_up_down.attr('data-type');

    if ($(window).scrollTop() > 150) {
        $button_up_down.addClass("visible");

        if (type == 'down') {
            $button_up_down.attr('data-type', 'up').text('↑');
        }
    } else if (lastPageScroll == 0 || ($button_up_down.attr('data-type') == 'up' && $(window).scrollTop() < 150)) $button_up_down.removeClass("visible");
});

所以我需要将<span>↑</span>添加到我的 JS 中，但我不确定如何在不使用innerHTML的情况下添加它？

对不起菜鸟问题。

Answer 1

//创建任何给它一个id的元素

<div id="app"></div>

// 这行代码写在 onCick 处理程序中

let app = document.querySelector('#app');
app.append('<span></span>');

//如果你想像这样在span中设置任何值，请使用模板字符串

app.append(`<span>${anyValue}</span>`);