Difference between append and html

Difference between append and html

Hey guys on a little bit confused about how they both differ from one another in functionality. Fromm what I know HTML() will completely replace , all the original content and append will append it to the last element.

But for some reason on my code below, the JSON data doesn't show inside the <div id="result"> </div> with html(output) only with append(output).

I am just confused on why wouldn't it work with html(output) and only with the append() function.
Isn't the html() supposed to work like .innerHTML ?

Any help would be really appreciated

  1.     <div id="result">  </div>

    </footer>
        <script>
       
        $.getJSON("data.json", function(data) {
       
            var output = "<ul>";
            $.each(data.paintings.painting, function (k,v) {
                     output += "<li>" + v.title + "</li>"    
                       
          }); 
         
            output += "</ul>";
            $("#result").html(output);
        });