CODEWITHSUNDEEP
javascriptjquery
snowflakes74
snowflakes74

Reputation: 1307

replace elements using jQuery

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'>");

Upvotes: 0

Views: 350

Answers (1)

Tomalak
Tomalak

Reputation: 338218

  • 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>

Upvotes: 2

Related Questions