The following code operates on a virtual dom or a real dom?

<div id="app">
    <button id="btn">change</button>
</div>

<script>
    let el = document.querySelector("-sharpapp");
    let fragment = document.createDocumentFragment();
    let vDiv = document.createElement("div");
    vDiv.textContent = "init value";
    fragment.appendChild(vDiv);
    el.appendChild(fragment);
    let btn = document.querySelector("-sharpbtn");
    btn.onclick = function (e) {
        vDiv.textContent = "change";
    }
</script>

is the div operated in the click event in the above code a virtual dom or a real dom,? if it is a virtual dom, why change the value of the virtual dom and change the value of the real dom in the page?

Mar.17,2021

what you create based on document is, of course, real. Virtual dom is first proposed by react


you all createElement, is of course real dom


your code is real dom
you can learn the mvvm ideas of vue or react, and will open the door to a new world. To learn about virtual dom.
virtual dom and real dom, you can see this answer: https://codeshelper.com/q/10.


dom operation. Dynamic change of vue,react data to virtual dom


must be real dom

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e50033-443d3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e50033-443d3.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?