JQuery .append(): Add <strong> inside <p>

Question

I'm trying to render this dynamically using jQuery .append() :

    <div class="alert alert-danger alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert" style="color: white" aria-label="Close">
        <span aria-hidden="true">&times;</span>
       </button>
       <p>
         <strong>Error!</strong> My error message
       </p>
   </div>

But I can't seem to get the p tag text after the strong text. It's either before the strong or it overwrites the strong text. This is what I've tried:

$('#error-div').append(
    $('<div>').prop(
        {
            class: 'my-class-name',
            role: 'alert',
        }
    ).append(
        $('<button>').prop({
            type: 'button',
            class: 'close',
            style: 'color: white',
        }).attr(
            {
                'data-dismiss': 'alert',
                'aria-label': 'Close'
            }
        ).append(
            $('<span>').attr(
                {
                    'aria-hidden': true,
                }).html('&times;')
        )
    ).append(
        $('<p>').append(
            $('<strong>').html('Error! ')
    ).html('My error message')
))

But this renders:

<div class="alert alert-danger alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close" style="color: white;">
    <span aria-hidden="true">×</span>
  </button>
 <p>My error message</p>
</div>

How do I get the strong tag inside the p tag, before the p text?

Answer 1

This is how I did it:

$('#error-div').append(
    $('<div>').prop(
        {
            class: 'my-class-name',
            role: 'alert',
        }
    ).append(
        $('<button>').prop({
            type: 'button',
            class: 'close',
            style: 'color: white',
        }).attr(
            {
                'data-dismiss': 'alert',
                'aria-label': 'Close'
            }
        ).append(
            $('<span>').attr(
                {
                    'aria-hidden': true,
                }).html('&times;')
        )
    ).append(
        $('<p>').html(
            $('<strong>').html('Error! ')
    ).append('My error message')
));$('#error-div').append(
    $('<div>').prop(
        {
            class: 'my-class-name',
            role: 'alert',
        }
    ).append(
        $('<button>').prop({
            type: 'button',
            class: 'close',
            style: 'color: white',
        }).attr(
            {
                'data-dismiss': 'alert',
                'aria-label': 'Close'
            }
        ).append(
            $('<span>').attr(
                {
                    'aria-hidden': true,
                }).html('&times;')
        )
    ).append(
        $('<p>').html(
            $('<strong>').html('Error! ')
    ).append('My error message')
));

Here is the JSFiddle demo