如何使用 Javascript 更改 元素的文本而不使 消失？答案

【问题标题】：How to change the text of a element using Javascript without disappearing?如何使用 Javascript 更改 元素的文本而不使 消失？
【发布时间】：2021-01-29 07:02:10
【问题描述】：

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

我的 HTML 中有 ↑：

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

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

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

抱歉这个菜鸟问题。

【问题讨论】：

$("#somewhere").append("↑")
代替这个：$(this).attr('data-type', 'down').text('↓');，试试$(this).attr('data-type', 'down').find('span').text('↓');

标签： javascript html text

【解决方案1】：

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

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

//这行代码写在onCick handler中

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

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

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

【讨论】：