javascript - JS：innerHTML 不更新

Question

我有一个简单的功能来更改innerHTML跨度元素的。这是代码：

function changeElementAnswered() {
    var dataq = this.getAttribute('data-num');
    var ele = document.getElementById('qp-' + dataq);
    if(ele){
        if(this.value != ""){
            ele.className = 'qp-item qp-item-answered';
        } else {
            ele.className = 'qp-item qp-item-unanswered';
        }
        var cele = document.getElementById('revq-' + dataq);
        if(cele) {
            cele.innerHTML = this.value.toString(); 
            alert(cele.innerHTML);
        } 
    }
}

这是 HTML 代码：

<span class="test-answer-rev" data-num="1" id="revq-1"></span>

我成功更新了 span 类的内部 html。警报功能显示正确答案，但问题是（当前实例的）HTML 代码没有更新（在开发人员模式下看不到更改）。我在这里想念什么？

-- 已经试过了.textContent还是不行

更新 1：我span在弹出窗口中使用，这意味着父级div被隐藏（display:none;）

标签： javascripthtml

Answer 1

innerHTML只会对网页的当前实例进行更改。它不会更改文件中的原始 HTML 代码。如果您转到开发人员工具并查看 HTML，它将被更改，但您无法使用innerHTML.

function changeElementAnswered(e) {
    var dataq = e.getAttribute('data-num');
    var ele = document.getElementById('qp-' + dataq);
 
    if(ele){
        if(ele.value != ""){
      
            ele.className = 'qp-item qp-item-answered';
        } else {
        
            ele.className = 'qp-item qp-item-unanswered';
        }
        var cele = document.getElementById('revq-' + dataq);
        if(cele) {
            cele.innerHTML = ele.value.toString(); 
            alert(cele.innerHTML);
        } 
    }
}

<span class="test-answer-rev" onclick="changeElementAnswered(this)" data-num="1" id="revq-1">gg</span>
<input value="a" id="qp-1">