JSFiddle - React, Tailwind, and code Playground

HTML

<div><b id="test1">hello </b></div>
<div><span id="test2"></span><div>

CSS

b { font-weight: bold }

JavaScript

// Try this with several different versions of jQuery

// 1 Element in document
$("#test1")
   .after("<span>there! </span>")
   .before("<i>1 Well, </i>");
console.log($("#test1").parent().contents());

// 2 Empty element, stuff added
$("#test2")
  .after("<b>hello </b>")
  .before("<i>2 Well, </i>")
  .after("<span>there! </span>");
console.log($("#test2").parent().contents());

// 3 Disconnected element, stuff added
console.log(
   $("<b>hello </b>")
    .after("<span>there! </span><br />")
    .before("<i>3 Well, </i>")
);

// 4 Empty element, stuff added
console.log(
   $()
    .after("<b>hello </b>")
    .before("<i>4 Well, </i>")
    .after("<span>there! </span>")
);