關於，這個問題呢！一直沒有在網上找到一個合適答案（可能這問題比較傻，嘿嘿）。今天把自己常用幾種方式說下：
第一種：
比較常見的就是直接把字符串拼接，然后插入到元素中。
var html='<li>' + data.num + '</li><li>' + data.floor + '</li><li>' + data.name + '</li><li>' + data.money + '</li>'; elem.innerHTML=html；
第二種：
與第一種大致，先創建對象，然后添加到外層對象中
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
第三種：
可以用網上mvvm框架，數據綁定比如：angular ,vue等 這里不舉例子了 哈哈
第四種：
模板的比如 (template.js)
我自己寫個小例子，不要噴我啊
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="con"></div>
<script>
var viewCommand = function() {
var tpl = {
product: ["<div>",
"<img src={#srcs#} />",
"<p>{#text#}</p>",
"</div>"
].join(""),
title: [
"<div class='title'>",
"<div class='main'>",
'<h2>{#title#}</h2>',
'<p>{#tips#}</p>',
"</div>",
"</div>",
].join("")
};
var html = "";
var formateString = function(str, obj) {
return str.replace(/{\#(\w+)#\}/g, function(match, key) {
console.log(match + obj[key])
return obj[key];
})
};
var Action = {
create: function(data, view) {
if(data.length) {
for(var i = 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 function excute(msg) {
msg.param = toString.call(msg.param) == "[object Array]" ? msg.param : [msg.param];
Action[msg.command].apply(Action, msg.param);
}
}();
var tit = {
tips: "颯颯颯颯是",
title: "安縣阿薩斯",
}
var product = [{
"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>
</html>
我了解大致就這些，大家可以說說自己的，同時歡迎提問題