JS 拼接 HTML 有多种方式，下面介绍使用这些方法拼接 HTML 例子，大体上提供了五种方法，分别为：使用JQuery字符串拼接HTML、使用数组拼接HTML、JQ生成HTML的糟糕写法、ES6语法模板字符串、Dom Api 结合 innerHTML 方法等。
使用JQuery字符串拼接HTML
使用字符串拼接html，再用JQuery创建元素l的jquery对象，最后加入到Dom中
var $hide_article_div = $(
'<div class="hide-article-box hide-article-pos content-center">' +
' <button onclick="article_overflow_hidden.show_all_article(this);" class="show_article_button">阅读全文</button>' +
'</div>'
);
$("#" + "ArticleId" + article.ArticleId).append($hide_article_div);使用数组拼接HTML
var complete_tag = [
"<article id='" + "ArticleId" + article.ArticleId + "'>",
" <header class='.ArticleTitle'>",
" <h2> <a href='" + article_Skip_Url + "'>" + article.ArticleTitle + "</a></h2>",
" </header> ",
" <div class='ArticleContent'>" + article.ArticleContent + "</div>",
" <div class= 'text-right article_message'>",
" <span class='ShowDate'>" + FormatData(article.ArticlePublicationDate, "yyyy-MM-dd hh:mm") + "</span> ",
" <a href='#' class ='btn btn-default'>" + article.Sort.SortName + "</a> ",
" <a href='" + article_Skip_Url + "'class='btn btn-primary'>阅读更多</a>",
" </div>",
"<hr/>",
"</article>"
].join("");
//数组 JOIN("") 标签后，可以直接把标签插入到，标签容器里
$("#article").append(complete_tag);JQ生成HTML的糟糕写法
使用数组和字符串直接拼接HTML，格式化显示后标签更加整齐，相比较使用 JQuery 对象逐个生成然后拼接（为什么之前这样用>_<）。如下代码所示
【糟糕的例子】HTML模板 生成如下表格个数据
<table class="table">
<thead>
<tr>
<th>分类Id</th>
<th>分类名称</th>
<th>分类别名</th>
<th>分类描述</th>
<th>父分类</th>
<th>操作</th>
</tr>
</thead>
<tbody id="sortLists">
</tbody>
</table>使用$(“”)语法大量生成元素后拼接，这样使用可维护性很差
//拼接sort信息以便展示
function showSort(res) {
$.each(res, function (i, sort) {
var tr = $("<tr/>");
var idTd = $("<td/>").text(sort.SortId);
var nameTd = $("<td/>").text(sort.SortName);
var aliasTd = $("<td/>").text(sort.SortAlias);
var descriptionTd = $("<td/>").text(sort.SortDescription);
var ParentSortTd = $("<td/>").text(sort.ParentSortId);
var optionTd = $("<td/>");
var delBtn = $("<button onclick='delSort(" + sort.SortId + ")' class='btn btn-danger btn-sm'>删除</button>");
var editBtn = $("<button onclick='editSort(" + sort.SortId + ")' class='btn btn-primary btn-sm'>修改</button>");
//删除按钮放入optionTd
optionTd.append(delBtn).append(" ").append(editBtn);
tr.append(idTd).append(nameTd).append(aliasTd).append(descriptionTd).append(ParentSortTd).append(optionTd);
$("#sortLists").append(tr);
});
}使用字符串拼接优化后的写法，清晰简单许多
let tr =
'<tr>' +
' <td>' + sort.SortId + '</td>' +
' <td>' + sort.SortName + '</td>' +
' <td>' + sort.SortAlias + '</td>' +
' <td>' + sort.SortDescription + '</td>' +
' <td>' + sort.ParentSortId + '</td>' +
' <td>' +
' <button onclick="delSort(' + sort.SortId + ')" class="btn btn-danger btn-sm">删除</button>' +
' <button onclick="editSort(' + sort.SortId + ')" class="btn btn-primary btn-sm">修改</button>' +
' </td>'
'</tr>'；
$("#sortLists").append($(tr));ES6语法模板字符串
使用模板字符串拼接HTML 省略了 + 加号，更加简洁
let tr =
`<tr id="articleId${article.ArticleId}"/>
<td>${article.ArticleId}</td>
<td>${article.ArticleTitle}</td>
<td>${article.ArticlePublicationDate}</td>
<td>${article.ArticleLastModificationDate}</td>
<td>${article.Sort.SortName}</td>
<td>${article.ArticleStatus}</td>
<td>
<div class="btn-group" role="group">
<button type="button" class= "btn btn-primary" >查看</button>
<button type="button" class="btn btn-danger">移入回收站</button>
<button type="button" class="btn btn-default">恢复</button>
</div >
</td>
</tr>;`
$("#Articles").append($(tr));JS Dom API 拼接元素
从下范例也看出，只使用原生的 Dom Api 拼接过于复杂了，不推荐这种方式。
<script>
/*
<tr>
<td>Tom</td>
<td>test@test.com</td>
<td>25</td>
<td><a href="javascript:;">link</a></td>
</tr>
*/
// 使用 JS 创建如上结构
//创建一个tr
var tr = document.createElement("tr");
//创建四个td
var nameTd = document.createElement("td");
var emailTd = document.createElement("td");
var ageTd = document.createElement("td");
var aTd = document.createElement("td");
//创建一个a元素
var a = document.createElement("a");
//创建文本节点
var nameText = document.createTextNode("Tom");
var eamilText = document.createTextNode("test@text.com");
var ageText = document.createTextNode("25");
var aText = document.createTextNode("link");
//把文件节点加入td中
nameTd.appendChild(nameText);
emailTd.appendChild(eamilText);
ageTd.appendChild(ageText);
aTd.appendChild(a.appendChild(aText));
//把所有 td 节点 加入tr中
tr.appendChild(nameTd);
tr.appendChild(emailTd);
tr.appendChild(ageTd);
tr.appendChild(aTd);
//输出
console.log(tr);
</script>
Dom Api 结合 innerHTML 方法
如果 使用JS调用 innerHTML，则可以使用原生的方式字符串拼串创建需要的HTML，与上面一种方式相比，拼串会简单许多。
<script>
/*
<tr>
<td>Tom</td>
<td>test@test.com</td>
<td>25</td>
<td><a href="javascript:;">link</a></td>
</tr>
*/
// 使用 JS 创建如上结构
//创建一个tr
var tr = document.createElement("tr");
//设置tr中的内容
tr.innerHTML = "<td>" + "Tom" + "</td>" +
"<td>" + "test@test.com" + "</td>" +
"<td>" + "25" + " </td>" +
"<td><a href= 'javascript:;'>link</a></td>";
//输出
console.log(tr);
</script>【例子】也可以使用变量参与拼接 ，还是参考上面例子
//创建一个tr
var tr = document.createElement("tr");
let name = "Tom";
let email = "test@test.com";
let age = "25";
let aTag = "<a href= 'javascript:;'>link</a>";
//设置tr中的内容
tr.innerHTML = "<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + age + "</td>" +
"<td>" + aTag + "</td>";
innerHTML的注意事项
同样需要注意的是修改 innerHTML 会改变元素内部的所有的HTML（注意因为元素都改变了所以绑定的事件处理函数会失效）所以一般慎用 tbody.innerHTML += “…” 这样的语言添加元素，参考其他文章。
元素属性innerHTML不能随意使用，编译器会自动修改字符串中，不合适的标签，参考下面代码字符串中的 td 标签 不应该出现在 div 中，所以解析器就删除了字符串中的 td 标签。
var div = document.createElement("div");
var s = "<td>我是一个td</td>";
div.innerHTML = s;
console.log(div);浏览器输出结果：可以发现浏览器删除了字符串中的 td。
本文投稿作者：飒飒，如若转载，请注明出处：https://iymark.com/articles/2948.html
微信扫一扫 
支付宝扫一扫 
