I am unable to create a dynamic Jjquery Div

Asked

Viewed 29 times

1

I’m a beginner when it comes to Javascript and jQuery and I’m trying to create a dynamic div, my goal is to create an Alert bootstrap whenever the button is pressed but I’m not getting it to happen...

<button id="myBtn">Click Here</button>

This is the script: 

$("#myBtn").click(function() {
   $(this).after(
       '<div class="alert alert-success alert-dismissable">'+
            '<button type="button" class="close" ' + 
                    'data-dismiss="alert" aria-hidden="true">' + 
                '&times;' + 
            '</button>' + 
            'Password Changed' + 
        '</div>');
});
html jquery

2 answers

1

To create a div with Jquery, it’s very simple: 

    $('<div>', {
    id: 'minhaDiv',
    class: 'minhaClasse',
    'outro-atributo': 'meuValor'
}).appendTo('body');

And you add that to an onClick, it’s up to you.

  • And how do I change the contents of this Div or the innerHTML I suppose?

  • 1

    you can pass variables inside the values of the attributes, an example would be: Let meuValor = 'value1' $('<div>', { html: meuValor, }). appendTo('body');

  • I didn’t understand what you meant by passing variables into the attributes, could I explain otherwise please?

  • 1

    Of course. We will solve your problem of creating an Alert: first you create the div with Jquery: Let minhaDiv = $('<div>'); then you add a content to it, your bootstraps classes: myDiv.addClass('Alert Alert-Success Alert-dismissable'); , and you play that div created into somewhere, right? can be body: myDiv.appendTo('body'); If you want to create an input and put inside that div, it’s the same process, but you put an appendchild(); http://api.jquery.com/ndappend/

  • Thank you very much for the explanation but I have one more question, how do I put a text like "Password Changed" that I have in my example? Thank you :)

  • 1

    in Jquery, if you use . html('text in here') to write something in the label style or description of a button, Voce would make your $('<button>'). html('text of the button');

Show 1 more comment

1


You can keep html separate js by putting like this:

<div style="display: none;" class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
        &times;
    </button>
    Password Changed
</div>

<button id="myBtn">Click Here</button>

and in the js so:

$("#myBtn").click(function() {
    $('.alert').show();
});

but remember that when you click on Alert’s X it removes the content and cannot show it again. To avoid this you can add a link or button that just hides Alert.

Here’s an example without removing Alert 

$("#myBtn").click(function() {
  $(".alert .mensagem").html('Sua mensagem aqui');
  $('.alert').show();
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div style="display: none;" class="alert alert-success alert-dismissable">
  <a class="close" onclick="$('.alert').hide()">&times;</a>
  <div class="mensagem"></div>
</div>

<button id="myBtn">Click Here</button>

  • The goal is to create div’s dynamically and not just one, there is some way to do it the way you explained?

  • 1

    In the Alert example, you can use the same Alert for several messages and keep html separate from js. So you don’t need to create the content, but it is possible to create the content, but the ideal for maintainability of the code is to keep it separate. You need to actually create new content or just change the text of the message?

  • I just need to change the text of the image.

  • I changed the last example by manipulating the message

  • That’s just what I needed, thank you :)

Browser other questions tagged html jquery

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