How does Ajax render to the page after fetching the data?

About, this problem! Have not found a suitable answer on the Internet (perhaps this problem is silly, hey). Today I used several ways to say:

The first type:

The common thing is to stitch the string directly and then insert it into the element.

var html= ' <li> ' + data.num + ' </li><li> ' + data.floor + ' </li><li> ' + data.name + ' </li><li> ' + Data.money + ' </li> '; elem.innerhtml=html;

The second type:

With the first approximation, first create the object and then add it to the outer object

var node=document.createelement ("LI");
var textnode=document.createtextnode ("Water");
Node.appendchild (Textnode);
document.getElementById ("MyList"). appendchild (node);

The third type:

Can be used on-line MVVM framework, data binding such as: angular, vue and so on here do not give examples of haha

The fourth type:

Examples of templates (template.js)

I'll write a little example myself, don't squirt me.

<! DOCTYPE html>varViewcommand =function() {                varTPL ={product: ["<div>",                        ",                        "<p>{#text #}</p>",                        "</div>"].join (""), title: ["<div class= ' title ' >",                        "<div class= ' main ' >",                        ' ,                        ' <p>{#tips #}</p> ',                        "</div>",                        "</div>",].join ("")                }; varhtml = ""; varFormatestring =function(str, obj) {returnStr.replace (/{\# (\w+) #\}/g,function(match, key) {Console.log (match+Obj[key])returnObj[key];                })                }; varAction ={create:function(data, view) {if(data.length) { for(vari = 0; i < data.length; i++) {HTML+=formatestring (Tpl[view], data[i])}} Else{html+=formatestring (Tpl[view], data); }}, display:function(Conta, data, view) {if(data) { This. Create (data, view)} document.getElementById (Conta). InnerHTML=html; HTML= "";                }                }; return functionExcute (msg) {Msg.param= Tostring.call (Msg.param) = = "[Object Array]"?Msg.param: [Msg.param];                Action[msg.command].apply (Action, Msg.param);            }            }(); varTit ={tips:"Whispering is.", Title:"An County Arthas",            }            varProduct = [{                "SRCs": ". /images/qq.png ",                "Text": "QQQQ"            }, {                "SRCs": ". /images/weixin.png ",                "Text": "QQ"}] Viewcommand ({command:"Create", param: [Tit,"Title"]}) Viewcommand ({command:"Create", param: [Product,"Product"]}) Viewcommand ({command:"Display", param: ["Con"]            })        </script> </body>
I understand that basically, you can talk about your own, and welcome to ask questions
How does Ajax render to the page after fetching the data?