Using jQuery to replace an element including all the HTML tags

Question

Supposing I have the correct location of an element whats the best way to replace all the html including the tags of a given block of HTML code using jQuery()? I'm looking to do something similar to the following. Is this a good way to do this? What other ways are available or useful to know about?

var location = 'td[id^="A0.R0.Work"]';
var element = jQuery(location).prev();
element.html('<h1>some code</h1>');

Thanks.

what the the recommended way of updating the entire html tags included... the .html()? — Asher
– Asher, Commented Mar 8, 2012 at 5:36

SenorAmor · Accepted Answer · 2012-03-08 02:02:42Z

2

Try .replaceWith()

$(element).replaceWith(other_stuff);

answered Mar 8, 2012 at 2:02

SenorAmor

3,34518 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jeff B Over a year ago

Nice. Forgot about that one.

SenorAmor Over a year ago

$("#JeffB.replaceWith_memory").replaceWith('boobs'); It's ok. I wish I were that lucky. ;)

Asher Over a year ago

I imagine I can also use .text(other_stuff) or .html(other_stuff) would that do the same thing?

SenorAmor Over a year ago

No. .replaceWith() replaces the entire block (including tags). .text() and .html() only replace the content of the block.

rjz · Accepted Answer · 2012-03-08 01:50:06Z

1

The code you provide will try to assign the HTML to whatever jQuery's html function returns. Instead, pass your html as the argument to the html function:

var location = 'td[id^="A0.R0.Work"]';
var element = jQuery(location).prev();
element.html('<h1>some code</h1>');

answered Mar 8, 2012 at 1:50

rjz

16.5k3 gold badges38 silver badges35 bronze badges

2 Comments

Jeff B Over a year ago

You are correct about the usage of html(), but remember that it replaces the contents, i.e. the children of the element, not the element itself.

rjz Over a year ago

Ah, you're right--I read the question wrong. @SenorAmor's answer covers it nicely, though!

Asher · Accepted Answer · 2012-08-21 16:29:15Z

0

JQUERY is sometimes too much overhead.

var location = document.getElementById('A0.R0.Work');
location.innerHTML = '<h1>some code</h1>';

answered Aug 21, 2012 at 16:29

Asher

2,8146 gold badges34 silver badges45 bronze badges

1 Comment

Asher Over a year ago

there is also document.getElementsByClassName()

Collectives™ on Stack Overflow

Using jQuery to replace an element including all the HTML tags

3 Answers 3

4 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Related