Question

I have the following element in my page:

<u>abc123</u>

How to select that element and change its contents ‘abc123’ to something else?

What I am actually trying to do is adding an iframe in between <u></u>. I know it is kind of silly, but I have a special requirement for that.

A second question: Is it possible to substitute the whole thing (<u>abc123</u>) for the iframe, or the iframe tag must go in between the <u></u>?

Thanks!

Answer 1

To filter by content (example):

$("u").filter(function(){
    return $(this).text() == "abc123";
}).html("<iframe>");

To directly execute code:

$("u").each(function(){
    var $this = $(this);
    if($this.text() == "abc123"){
        $this.html("<iframe>");
    }
})

Use .replaceWith() instead of .html() if you want to also replace the tags (<u></u>).

The .html() method overwrites the current contents of an element. If you want to add new information without erasing the previous data, use .append().