jQuery outputting an html div

Question

How to output a div inside another div with jQuery

first principal div :

<div id ="username_error"></div>

and this one will be inside it :

 <div class="alert alert-primary" role="alert">
    This is a primary alert—check it out!
 </div>

I tried

$("#username_error").html('<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
    </div>
');

but it doesn't work , is there an alternative method thanks in advance

You need to actually provide the HTML to insert as an argument to the `.html()` call... — Rory McCrossan, Nov 25 '17 at 21:48
Possible duplicate of [How to replace innerHTML of a div using jQuery?](https://stackoverflow.com/questions/1309452/how-to-replace-innerhtml-of-a-div-using-jquery) — dferenc, Nov 25 '17 at 21:52

score 0 · Answer 1 · answered Nov 25 '17 at 21:53

0

var content = '<div class="alert alert-primary" role="alert">This is a primary alert—check it out</div>';

$("#username_error").html(content);

answered Nov 25 '17 at 21:53

Zahid Saeed

score 0 · Accepted Answer · answered Nov 25 '17 at 21:53

Just add this to your JQ:

$("#username_error").html('<div class="alert alert-primary" role="alert">This is a primary alert—check it out!</div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="username_error">

</div>

score 0 · Answer 3 · answered Nov 25 '17 at 22:03

you can use append function

$("#username_error").append('<div class="alert alert-primary" role="alert">This is a primary alert—check it out!</div>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="username_error">

</div>

score 0 · Answer 4 · answered Nov 25 '17 at 22:10

$('<div class="alert alert-primary" role="alert">This is a primary alert—check it out!</div>').appendTo("#username_error");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id ="username_error">

</div>

4 Answers4