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

Answer 2

Consider building the nodes then appending them to each other and then applying it all to the page element. OR use content templates and avoid the complication Ref:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Note I used differing text just to show one from the other with a J and T at the end.

const sp = $('<p>').html($('<strong>').html('Error!'));
const newSpan = $('<span>').attr({
  'aria-hidden': true
}).html('&times;');

const newButton = $('<button>').prop({
  type: 'button',
  class: 'close',
  style: 'color: white',
}).attr({
  'data-dismiss': 'alert',
  'aria-label': 'Close'
}).append(newSpan);

const newThing = $('<div>').prop({
    class: 'alert alert-danger alert-dismissible',
    role: 'alert',
  })
  .append(newButton)
  .append(sp);

newThing.find('p>strong').after(' My error messageJ');
$("#error-div").html(newThing);

/* all that jQuery ^^ v.s. a content template: */
const errorClone = document.getElementById("alert-template").content.cloneNode(true);
document.body.append(errorClone);

#error-div {
  margin-bottom: 1.5em;
}

.alert.alert-danger {
  background-color: #fF000040;
}

.close {
  background-color: #0040FF40;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="error-div"></div>
<template id="alert-template">
<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 messageT
  </p>
</div>
</template>