时间戳

首页 > 解决方案 > 如何使用 jQuery 制作 html 块？

jquery - 如何使用 jQuery 制作 html 块？

问题描述

如果有人能告诉我如何使用 jQuery 创建它，我将不胜感激：

<div class="card">
    <img src="images/cat6.jpg" alt="Avatar" style="width:100%">
    <div class="container">
        <h4><b>John Watson</b></h4> 
        <span class="article" id="article_1_intro"></span><span id="article_1" class="article more_text"></span> 
    </div>
    <a href="#" class="read_more">Read More</a>
</div>

标签： jqueryhtml

解决方案

ECMAScript 6 等最新版本支持

var HTML=`<div class="card">
        <img src="images/cat6.jpg" alt="Avatar" style="width:100%">
        <div class="container">
            <h4><b>John Watson</b></h4> 
            <span class="article" id="article_1_intro"></span><span id="article_1" class="article more_text"></span> 
        </div>
        <a href="#" class="read_more">Read More</a>
    </div>`;

如果您必须在其中添加一些动态数据，您可以使用${variableName} 如下所示：

var IMGSrc="imageURL";
var Name="John Watson";
var HTML=`<div class="card">
            <img src="${IMGSrc}" alt="Avatar" style="width:100%">
            <div class="container">
                <h4><b>${Name}</b></h4> 
                <span class="article" id="article_1_intro"></span><span id="article_1" class="article more_text"></span> 
            </div>
            <a href="#" class="read_more">Read More</a>
        </div>`;

推荐阅读