JQuery to add element in div function.append

Question

JQuery to add element in div function.append

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Goodafternoon,I'mtryingtoaddadirectelementtoadiv.Butapparentlythe.appendfunctionneedsadivandanotherelement.Theproblemisthattheelementthatcomesbeforeisvariableandmyiconshouldnotbe.

Eventhoughtestingthis,mycodedidnotwork.

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

If this function is not suitable for this case, does it have some alternative function similar to this, but I can put an element inside a div, not next to another element?

PS: I do not have access to HTML, so I need to do this.

I've put a picture to illustrate. Basically I need to add a banner there "bank transfer", after adding it, I'll turn it into pop-up so that it's a banking data message, that's all.

html jquery

asked by anonymous 19.09.2018 / 20:24

2 answers

0

The problem description is a bit confusing, but what it looks like is that you want to add a new payment option radio with the name "Bank Transfer" within div that already has the other options.

If so, this example based on your HTML does this using the same command append of 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><divid="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>

19.09.2018 / 22:25

Why is my WHERE statement not working? Link breaking by typing directly in browser

score 1 · Accepted Answer

This is what you need, I include an alert for you to see that it is possible to include an event in the click, you can call a function, 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><scriptsrc="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>