Question

我有一个简单的功能来更改span元素的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;）

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">

JS：innerHTML不更新

1 个答案: