Для полной замены одного элемента на другой предназначены два метода. 

replaceWith(<Выражение>) — заменяет все элементы коллекции на <Выражение>. В качестве параметра может быть указан HTML-код, DOM-элемент или коллекция элементов jQuery. Для примера заменим элемент с идентификатором div1 на новый элемент при щелчке на нем.

    $("#div1").click(function() {

      $("#div1").replaceWith("<u>Новый элемент</u>");

   });

<div id="div1">Нажмите здесь</div>
Теперь заменим на DOM-элемент.

    $("#div1").replaceWith($("<u>Новый элемент</u>").get (0));  
А теперь заменим на созданный элемент коллекции jQuery.
   $("#div1").replaceWith($("<u>Новый элемент</u>"));
Если указать существующую коллекцию элементов jQuery, то элементы будут перемещены.

   $("#div1").replaceWith($("p"));

   <div id="div1">Нажмите здесь</div>

   Какой-то текст<br>

   <p>Абзац1</p>  

   <p>Абзац2</p>
В результате все абзацы будут перемещены вместо элемента с идентификатором div1, и мы получим следующий HTML-код.

    <p>Абзац1</p><p>Абзац2</p>

    Какой-то текст<br>

replaceAll{<Селектор>) — вставляет созданный элемент вместо всех элементов, соответствующих указанному селектору. Заменим элемент с идентификатором div1 на другой элемент.

   $("<u>Новый элемент</u>").replaceAll("#div1");
Результат будет таким же, как и при использовании метода replaceWith().
   $("#div1").replaceWith("<u>Новый элемент</u>");

Как видно из примера, мы поменяли параметры местами и использовали метод replaceWith() вместо метода replaceAll().