0

ElementoBoa tarde, Estou tentando adicionar um elemento direto em uma div. Só que aparentemente a função .append, precisa de uma div e outro elemento. O problema é que o elemento que vem antes, é variavel e o meu icone não deve ser.

Mesmo assim testando isso, meu codigo não funcionou.

<script>
$(".card VI").ready(function(){
    $("#creditcardZone").append("<h1>Teste</h1>");
});
</script>

HTML:

<div id="creditcardZone" class="card_list"> <label class="card EL"><input type="radio" checked="" value="EL" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="ELO"><span><small>ELO</small></span></label><label class="card MC"><input type="radio" value="MC" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="MasterCard"><span><small>MasterCard</small></span></label><label class="card DC"><input type="radio" value="DC" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="Diners"><span><small>Diners</small></span></label><label class="card AX"><input type="radio" value="AX" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="American Express"><span><small>American Express</small></span></label><label class="card VI"><input type="radio" value="VI" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="Visa"><span><small>Visa</small></span></label></div>

Se esta função não serve para este caso, tem alguma alternativa de função parecida com essa, porém que eu consiga colocar um elemento dentro de uma div, e não ao lado de outro elemento?

PS: Não tenho acesso ao HTML, por isso preciso fazer assim.

Coloquei uma imagem pra exemplificar. Basicamente preciso adicionar uma bandeira ali "transferencia bancaria", depois de adiciona-la, vou transformar em pop-up para que ela de uma mensagem de dados bancarios, só isso.

15
  • não entendi bem o que vc pretende, mas o append inclui no elemento "pai", no final, depois de tudo que há no elemento. Você pode usar também prepend, que faz o mesmo, mas insere no início, antes de todos os outros elementos que já estão no "pai" Commented 19/09/2018 às 18:28
  • Tá parecendo mais que o seu código não está sendo executado porque você não colocou ele dentro do bloco $.ready Commented 19/09/2018 às 18:29
  • Seria melhor se mostra a estrutura dos objetos e onde deseja inserir pra ficar mais fácil de ajudar Commented 19/09/2018 às 18:30
  • 1
    aqui está o fragmento (function(){ document.getElementById("creditcardZone").append('<h1>Teste</h1>'); })(); Commented 19/09/2018 às 18:48
  • 1
    Consegue, basta editar o que você precisa. Commented 19/09/2018 às 20:21

2 Respostas 2

1

É isto o que você precisa, incluí um alert pra você ver que é possível incluir um evento no click, você pode chamar uma função, etc...

(function(){
    var lbl, input, span, small;
    //Cria o label
    lbl = document.createElement("label");
		lbl.setAttribute("class", "card VII");
  
    //cria o input
    input = document.createElement("input");
    input.setAttribute("type", "radio");
    input.setAttribute("value", "VII");
    input.setAttribute("class", "rdoCreditCards");
    input.setAttribute("name", "CreditCardProvider");
    input.setAttribute("id", "outros");
    input.setAttribute("displayname", "outros");
    input.setAttribute("onClick", "alert('hello')");
    
    //cria o span
    span = document.createElement("span");
    
    
    //cria o small
    small = document.createElement("small");
    
    
    //junta tudo
    span.appendChild(small);
    input.appendChild(span);
    lbl.appendChild(input);
    document.getElementById("creditcardZone").appendChild(lbl);
})();
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container"> <br />
      <div id="creditcardZone" class="card_list"> <label class="card EL"><input type="radio" checked="" value="EL" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="ELO"><span><small>ELO</small></span></label><label class="card MC"><input type="radio" value="MC" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="MasterCard"><span><small>MasterCard</small></span></label><label class="card DC"><input type="radio" value="DC" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="Diners"><span><small>Diners</small></span></label><label class="card AX"><input type="radio" value="AX" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="American Express"><span><small>American Express</small></span></label><label class="card VI"><input type="radio" value="VI" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="Visa"><span><small>Visa</small></span></label></div>
    </div>
  </body>
</html>

2
  • "porém não acredito que seja o que você quer..." mas Alvaro, se é uma resposta não deveria atender o que ele quer? :P Commented 19/09/2018 às 18:44
  • @AlvaroAlves Entendi, mas ai seria o mesmo que adicionar um ::after, certo? Ele vai se ligar ao elemento anterior que neste caso é o visa... Realmente não tem a ver com o que eu quero, pq esse "visa" pode desaparecer, mas meu elemento precisa ficar. Commented 19/09/2018 às 18:45
0

A descrição do problema está um pouco confusa, mas o que parece é que você quer adicionar um novo "radio" de opção de pagamento com o nome "Transferência Bancária" dentro do div que já tem os outras opções.

Se for isso, esse exemplo baseado no seu HTML faz isso usando o mesmo comando append do jQuery.

$(document).ready(function() {
  $("#add").on("click", function () {
    $("#creditcardZone").append("<label class='card TR'><input type='radio' value='TR' class='rdoCreditCards' name='CreditCardProvider' id='CreditCardProvider' displayname='Transferência'><span><small>Transferência Bancária</small></span></label>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="creditcardZone" class="card_list">
    <label class="card EL">
      <input type="radio" checked="" value="EL" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="ELO">
      <span><small>ELO</small></span>
    </label>
    <label class="card MC">
      <input type="radio" value="MC" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="MasterCard">
      <span><small>MasterCard</small></span>
    </label>
    <label class="card DC">
      <input type="radio" value="DC" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="Diners">
      <span><small>Diners</small></span>
    </label>
    <label class="card AX">
      <input type="radio" value="AX" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="American Express">
      <span><small>American Express</small></span>
    </label>
    <label class="card VI">
      <input type="radio" value="VI" class="rdoCreditCards" name="CreditCardProvider" id="CreditCardProvider" displayname="Visa">
      <span><small>Visa</small></span>
    </label>
  </div>
  <p>
  <button id="add">Adicionar Bandeira</button>
  </p>
</body>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .