Replace specific dom element with new content

Question

I have a structure like this:

<div class="foo">
  <div class="bar">
    Some content
  </div>
  Maybe some other content
</div>

I defined a custom plugin for editing this section. And I return the new html content to replace the div.foo.

I set the new content with:

tinyMCE.activeEditor.selection.setContent(html_content);

My custom button related to new plugin is working for both: foo and bar divs. I mean the same behaviour is assigned.

The problem is on save: I want to select the div.foo dom element and replace it with new html_content. So, instead setting the content for current (not sure what) selection how to set the content for a specific dom element in TinyMCE v.3?

(Update: I don't care what the user selected before pressing MyCustomButton, if something inside foo div is selected the full section to be replaced with new content.)

Answer 1

It seems working with just some jQuery code:

var $old_section = $("iframe").contents().find('div.foo').first();
$old_section.replaceWith(html_content);

To be improved: get closest .foo to given selection.