一些JS拼接HTML的常用方法总结

JS 拼接 HTML 有多种方式,下面介绍使用这些方法拼接 HTML 例子

文章目录(展开/隐藏→)

展开
4.3
(3)

JS 拼接 HTML 有多种方式,下面介绍使用这些方法拼接 HTML 例子,大体上提供了五种方法,分别为:使用JQuery字符串拼接HTML使用数组拼接HTMLJQ生成HTML的糟糕写法ES6语法模板字符串Dom Api 结合 innerHTML 方法等。

一些JS拼接HTML的常用方法总结

使用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>
一些JS拼接HTML的常用方法总结

Dom Api 结合 innerHTML 方法

如果 使用JS调用 innerHTML,则可以使用原生的方式字符串拼串创建需要的HTML,与上面一种方式相比,拼串会简单许多。

一些JS拼接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。

一些JS拼接HTML的常用方法总结

共计3人评分,平均4.3

到目前为止还没有投票~

很抱歉,这篇文章对您没有用!

让我们改善这篇文章!

告诉我们我们如何改善这篇文章?

本文投稿作者:飒飒,如若转载,请注明出处:https://iymark.com/program/js/js-html-split.html

(0)
上一篇 2022年09月21日 19:27
下一篇 2022年09月22日 20:55

相关推荐

发表回复

登录后才能评论
本站APP