Creating elements with jQuery

One of the options is using the <template> HTML tag link

  

The <template> HTML element is a mechanism for encapsulating content   on the client side that is not rendered when the page loads,   but can be later instantiated at run time   using JavaScript.

This is a tag that is not visible to the user and inside it you can build your block of code 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 that is inside the template tag and shows on the page "plotting" the code inside the #container that you can by and align wherever you want on the page. (do not need jQuery in this case)

Notice that it is within <div id="container"></div> that it will place the code that is inside the template tag. In this case you do not even have to put display:none in the tag, because it does not render on the screen for default

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"><spanclass="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>
    

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 have helped.

Using jQuery and template literals you can do something like the following:

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 do not know how familiar you are with Js, but I think it's good to know Vue, in its simplified version you can easily componentize, at a glance at that free course .

Thinking about code improvements, I've researched and also tried 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>'
                );

Then delete the code above the HTML and left only one div to go populating within that div.