replace elements using jQuery

Question

I have the following HTML rendered out in powerapps portal and I would like to replace all the occurrence of

    <font size = 3>..... </font>

with

    <div class="legend">... </div> 

I have tried the snippet below, but it didn't replace it:

    var $descBox = $("<font size = 3>"); $descBox.replaceAll("<div class='legend well'>");

Answer 1

• To search for existing elements, use CSS expressions in jQuery's $().
• To create new elements, use HTML code in jQuery's 's $().
• .replaceAll() is a string function. You meant .replaceWith().

i.e.

$("font[size=3]").replaceWith( $("<div class='legend well'>") );

or, shorter

$("font[size=3]").replaceWith("<div class='legend well'>");

---

Exchanging only the <font> elements without also replacing their contents requires a couple more steps.

$("font[size=3]").each(function () {
  // insert new container div after each `<font>`
  var $div = $("<div class='legend well'>").insertAfter(this);

  // remove the `<font>` and append its children to the new container
  $(this).remove().children().appendTo($div);
});

div.legend {
   color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<font size="3">
  <p>elements to keep</p>
</font>
<font size="3">
  <p>more elements to keep</p>
</font>