html - How to change the text of a <span> element using Javascript without <span> disappearing?

Question

I have a really simple question but it's something I have not done before.

I have <span>↑</span> in my HTML:

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

But I dont have <span>↑</span> in my JS:

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");
});

So I need to add <span>↑</span> to my JS but i am not sure how to add it without using innerHTML?

Sorry for the noob question.

question from:https://stackoverflow.com/questions/65950102/how-to-change-the-text-of-a-span-element-using-javascript-without-span-disap

Answer 1

//create any element gave it an id

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

// this line of code write in onCick handler

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

//use templating string if you want to set any value in span like this

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