Creating elements with jQuery

Question

How to create elements with jQuery?

I’ll try to explain...

I have 2 screens, card registration and card display.

For each registered card, I send it to the server and enter it in the internal database. So far so good.

Only for every card registered, I need to, too, go populating my html card display.

He gets like this:

The code of the image above is this:

<div class="row corpo-cartoes">
            <div class="col s12 m7" style="width: 100%;">
                <div class="card">
                    <div class="card-image">
                        <img src="img/apresentacao.jpg">
                        <span class="card-title">Card Title</span>
                    </div>
                    <div class="card-action icone-meu-cartao">
                        <a href="#" ><i class="material-icons">code</i></a>

                        <a href="#"><i class="material-icons">crop_free</i></a>
                        <a href="#"><i class="material-icons">visibility</i></a>
                        <a href="#"><i class="material-icons btn-editar">edit</i></a>
                    </div>
                </div>
            </div>
        </div>

My question is:

How do I create the above code with jQuery to populate on the card display for each registered card?

Or have a better way of doing it?

Answer 1

One of the options is using the tag <template> of HTML https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

The HTML element <template> is a mechanism to encapsulate a content client side that is not rendered when the page is loaded, but can be instantiated later at execution time using Javascript.

This is a tag that is not visible to the user and within it you can build your code block which will be the base to be duplicated. Then with a script and calling the function in click in the element vc duplicates and shows the content inside the tag template and shows on the page "filling" the code inside the #container that you can put and line up wherever you want on the page. (don’t need jQuery in this case)

Notice it’s inside the <div id="container"></div> that it will put the code that is inside the tag template. In that case you don’t even have to put display:none on the tag as it does not render on the screen by default

See how it looks, there’s a Btn that when you click adds the block of template, but you can adapt to your case:

function useIt() {
    var content = document.querySelector('template').content;
    document.querySelector('#container').appendChild(
    document.importNode(content, true));
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />



<div class="container" >
    <div class="row">
        <div class="col s12">
            <button class="btn btn-primary" onclick="useIt()">Clique aqui</button>
        </div>
    </div>
    <div class="row corpo-cartoes">
        <!-- onde vai plotar o template -->
        <div id="container"></div>
    </div>
</div>

<!-- aqui etá o seu template com o bloco de código -->
<template>
    <div class="col s12 m7" style="width: 30%;">
        <div class="card">
            <div class="card-image">
                <img src="https://placecage.com/100/100">
                <span class="card-title">Card Title</span>
            </div>
            <div class="card-action icone-meu-cartao">
                <a href="#" ><i class="material-icons">code</i></a>

                <a href="#"><i class="material-icons">crop_free</i></a>
                <a href="#"><i class="material-icons">visibility</i></a>
                <a href="#"><i class="material-icons btn-editar">edit</i></a>
            </div>
        </div>
    </div>
</template>
    

Answer 2

Thinking about code improvements, I researched and also to do with append:

$(".listagem").append(
                    `<div class="row" id="corpo-cartoes">
                        <div class="col s12 m7" style="width: 100%;">
                            <div class="card">
                                <div class="card-image">
                                    <a href="cartao.html#${id}"><img src="${capa}"></a>
                                    <span class="card-title">${nome}</span>
                                </div>
                                <div class="card-action icone-meu-cartao">
                                    <a href="#"><i class="material-icons">code</i></a>
                                    <a href="#"><i class="material-icons">crop_free</i></a>
                                    <a href="#"><i class="material-icons">visibility</i></a>
                                    <a href="cadastro-cartao.html#${id}"><i class="material-icons btn-editar">edit</i></a>
                                </div>
                            </div>
                        </div>
                    </div>`
                );

So delete the code above the HTML and left only one div to populate inside that div.

Answer 3

You can do in pure Js as follows

var content = "<div class='card'>Conteudo do card</div>";
document.getElementById('ID-CONTENT-DIV').insertAdjacentHTML('beforeEnd',content );

I hope I’ve helped.

Answer 4

Using jQuery and literals template you can do something like this:

var cardComponent = (cardData) => ('
  <div class="col s12 m7">
    <div class="card">
      <div class="card-image">
        <img src="`${cardData.imagePath}`">
        <span class="card-title">`${cardData.imagePath}`</span>
        </div>
      <div class="card-action icone-meu-cartao">
        ...
      </div>
    </div>
  </div>')

# Quando obtiver o response do cadastro você executa o seguinte:
$('.corpo-cartoes').append(
  cardComponent(response.data)
)

Or another tip, I don’t know how familiar you are with Js, but I think it’s good to know Vue, in the simplified version of it you can already compose easily, from a look at this free course.