Jquery to add element in the.append function div

Question

Jquery to add element in the.append function div

Asked 5 years, 9 months ago

Viewed 1,556 times

0

Good afternoon, I’m trying to add a direct element in a div. Only that apparently the . append function, needs a div and another element. The problem is that the element that comes before is variable and my icon should not be.

Still testing it, my code didn’t work.

<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, it has some function alternative similar to this one, but that I can place an element inside a div, and not next to another element?

PS: I don’t have access to HTML, so I need to do it like this.

I put an image to illustrate. Basically I need to add a flag there "bank transfer", after I add it, I’ll turn it into pop-up so that it gives a bank data message, that’s all.

I don’t quite understand what you want, but the append includes in the "parent" element, at the end, after everything there is in the element. You can also use prepend, which does the same, but inserts at the beginning, before all the other elements that are already in the "father"

– Ricardo Pontual

2018/09/19 at 18:28
It’s looking more like your code isn’t running because you didn’t put it inside the block $.ready

– Wallace Maxters

2018/09/19 at 18:29
It would be better to show the structure of the objects and where you want to insert to make it easier to help

– Ricardo Pontual

2018/09/19 at 18:30
@As you can see in the image, I want to add an element that is not clicked along with the previous one, and that even if the previous element does not appear.

– Gabriel Salomão

2018/09/19 at 18:39
But you do it in the page load or at some event?

– Alvaro Alves

2018/09/19 at 18:42
@Ricardopunctual the big problem is precisely that the flags depend on another factor, so they may not appear and will only appear my icon. This is if it is in the DIV, and not associated with the previous element.

– Gabriel Salomão

2018/09/19 at 18:42
Now I understand, what you need is to create a new element

– Alvaro Alves

2018/09/19 at 18:46
I think I understand what you need, I’m going to create a snippet here and I’ve put it here for you to see if it’s

– Alvaro Alves

2018/09/19 at 18:47
@Alvaroalves That’s right! But anyway, if you can pass me where was the error of Cod that I was trying I am grateful.. I tried to look here but it erased.

– Gabriel Salomão

2018/09/19 at 18:47
1

here is the fragment (function(){
 document.getElementById("creditcardZone").append('<h1>Teste</h1>');
})();

– Alvaro Alves

2018/09/19 at 18:48
is that it? https://codepen.io/alvaro-alves/pen/zJzpMG?editors=1011

– Alvaro Alves

2018/09/19 at 19:05
@Alvaroalves, exactly! I just need to add an image to the image in this block. Then I can put another function right there? Because the ultimate goal actually, is to click, open a pop-up, but this is another function that I’m studying.

– Gabriel Salomão

2018/09/19 at 20:18
1

Can, just edit what you need.

– Alvaro Alves

2018/09/19 at 20:21
Show! Thank you so much for your dedication!

– Gabriel Salomão

2018/09/19 at 20:22
I edited my reply and included a call to an Alert, for you to check the way forward.

– Alvaro Alves

2018/09/19 at 20:27

Show 10 more comments

2 answers

1

This is what you need, includes 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>
		<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>

"but I don’t believe it’s what you want..." but Alvaro, if it is an answer should not meet what he wants? : P

– Ricardo Pontual

2018/09/19 at 18:44
@Alvaroalves I understand, but then it would be the same as adding a ::after, right? It will connect to the previous element that in this case is the visa... It really has nothing to do with what I want, because this "visa" may disappear, but my element needs to stay.

– Gabriel Salomão

2018/09/19 at 18:45

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.

by Pagotti • **3,042** points · Answer 1 · 2018-09-19T20:25:05+00:00

The description of the problem is a little confusing, but what it seems is that you want to add a new "radio" payment option with the name "Bank Transfer" inside the div who already has the other options.

If so, this HTML-based example does so using the same command append 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>