这是一个简单的解决方案

Question

如果有人能向我展示如何使用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>

Answer 1

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>`;

Answer 2

您基本上可以使用第三方工具；

https://www.accessify.com/tools-and-wizards/developer-tools/html-javascript-convertor/

它将减轻您的工作量。所以基本上您会期望像这样的东西，

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

现在，您可以随意使用 myBlock 变量。

Answer 3

var child = '<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>'

假设您要将此元素作为子元素添加到下面的元素中，

<div id="parent"></div>

在jQuery中，

$('#parent').html(child);

Answer 4

这是答案

<script>
$(document).ready(function(){
  $("body").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>`
)
});
</script>

Answer 5

这是一个简单的解决方案

$(document).ready(function(){
        $('body').html(`<div class="card"><img src="images/cat6.jpg" alt="Avatar" style="width:100%">
            <div class="container">
            <h4><b>JohnWatson</b></4><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>`);
    });

Answer 6

好吧，由于您没有告诉您将HTML代码放在哪里，因此我假设它位于<body>中。因此，您只需要jquery中的.html()函数。看起来像这样：

    $("body").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>');

Answer 7

您可以使用JQuery .append（）函数。此方法将指定的内容作为jQuery集合中每个元素的最后一个子元素插入。Official Doc

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn").click(function(){
  var s = "<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>"
    $("#dynamic").append(s);
  });
 
});
</script>
</head>
<body>
<div id="dynamic"><div>
<button id="btn">Click Me</button>
</body>
</html>

如何使用jQuery制作html块？

7 个答案:

这是一个简单的解决方案