为什么修改元素innerHTML控制台无报错但页面无同步更新？

问题原因 #

你的代码核心问题是innerHTML属性的大小写书写错误：
DOM API 对属性名大小写敏感，正确的属性名是全小写的inner加上全大写的HTML，即innerHTML。你代码中写的innerHtml是给DOM元素额外新增了一个自定义属性，并没有触发原生的DOM内容更新逻辑，所以会出现读取你自己设置的innerHtml有值、但页面没有变化的情况。

修复方案 #

把JS代码中两处innerHtml替换为innerHTML即可，修复后的JS代码如下：

var datac
var user

function get(){
    user = localStorage.getItem(datac)
    if(user != null){
        document.getElementById("ll").innerHTML = user
        console.log(user)
    }
    else {
        document.getElementById('ll').innerHTML = 'Please Login.'
    }
}

function checklogin(){
    $.getJSON('https://text-edit-api-default-rtdb.asia-southeast1.firebasedatabase.app/.json', function ( data ){
    datac = data['data']['password']['localstorge']['code']
    get()
})}

checklogin()

额外注意点 #

你接口返回的字段里写的是localstorge，和标准的API名localStorage拼写不一致，如果你是故意设置的该字段名可以忽略，若是手误可以同步修正避免后续混淆。

内容的提问来源于stack exchange，提问作者user16376844