How to move an element one level up?

How to move an element one level up?

Assume I have the following HTML source code

<div class="foobar" ....>...

<picture ...>....

<img ....> ...</img>

....</picture>

...</div>

How can I extract the <img> element and move it one level up just before (resp. after) the <picture> element?

This procedure should be done for all <img> below the enclosing <div class="foobar"> but not for the <img>s outside.

Thank you

Peter