CODEWITHSUNDEEP
jqueryhtml
OunceOfShag
OunceOfShag

Reputation: 25

How do I make an html block using jQuery?

I'd be grateful if someone could show me how I could create this with 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>

Upvotes: 0

Views: 95

Answers (7)

ThivankaW
ThivankaW

Reputation: 540

You can basically use a 3rd party tool;

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

it will ease your effort. so basically you would expect something like this,

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

Now you can play around with myBlock variable as you please.

Upvotes: 0

Sushil
Sushil

Reputation: 1131

ECMAScript 6 and other Latest version supports

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

If You have to add some Dynamic Data inside it you can use ${variableName} Like This:

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

Upvotes: 1

RAGINROSE
RAGINROSE

Reputation: 724

You can use JQuery .append() function. This method inserts the specified content as the last child of each element in the jQuery collection.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>

Upvotes: 0

Thanveer Shah
Thanveer Shah

Reputation: 3333

Here is a Simple Solution

$(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>`);
    });

Upvotes: 0

YANZ
YANZ

Reputation: 386

Well, since you didn't tell the where do you want to put that HTML code, I assume that it's in the <body>. So, you just need .html() function from jquery. It will look like this:

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

Upvotes: 0

lakhvir kumar
lakhvir kumar

Reputation: 265

Here is the answer

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

Upvotes: 0

Ammar Ameerdeen
Ammar Ameerdeen

Reputation: 969

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>'

Let's say you want to add this element as a child to below element,

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

In jQuery this goes like,

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

Upvotes: 0

Related Questions