Rendering an HTML div through jQuery

Question

Is there a way to insert a div inside another div using jQuery?

Here is the main div:

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

And here is the div that should be placed inside it:

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

I attempted this code snippet:

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

Unfortunately, this method did not work. Is there an alternative approach you can suggest? Thank you in advance.

Answer 1

Answer №1

Simply insert the following code into your jQuery:

$("#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>

Answer 2

Simply insert the following code into your jQuery:

$("#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>

Answer 3

let message = '<div class="alert alert-primary" role="alert">This is a primary alert—take a look</div>';

$("#error_message").html(message);

Answer 4

let message = '<div class="alert alert-primary" role="alert">This is a primary alert—take a look</div>';

$("#error_message").html(message);

Answer 5

If you need to add content dynamically, the append function in jQuery can be very helpful.

$("#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>

Answer 6

If you need to add content dynamically, the append function in jQuery can be very helpful.

$("#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>

Answer 7

$('<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>

Answer 8

$('<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>