No último post que eu publiquei aqui sobre o encadeamento de métodos no jQuery, eu criei o método outerHTML como exemplo. Empolguei e resolvi melhorar este método por dois motivos:

1 – O método .html() retorna o conteúdo do elemento e .html( string ) escreve um conteúdo novo para o elemento

O método .outerHTML() melhorado retorna o elemento mais o seu conteúdo e .outerHTML( string ) substitui o elemento na mesma posição em relação ao elemento pai.

2 – O método .replaceWith( string ) também subsitui o elemento por um novo na mesma posição em relação ao pai. Porém este método não perde a referência do elemento após substituir não usar outros métodos para manipular ou versar os novos elementos

Traduzindo. Veja o HTML abaixo. Eu quero trocar os DIVs por links e após feito isto que quero adicionar colocar borda no link e negrito com a tag B.

<div>Site do 100loop.com</div>
$(document).ready(function(){
    var $div = $("div");
    $div.replaceWith("<a href="https://100loop.com/">" + $div.text() + "</a>")
        .css("border","1px solid #F00")
        .wrapInner("<b />");
});

Com o método replaceWith o resultado vai ser o que está abaixo. Repare que foi possível substituir uma tag pela outra, mas a referência para versar ou manipular os novos elementos não existem:

<a href='https://100loop.com/'>Site do 100loop.com</a>

Com o método outerHTML o resultado é o seguinte:

<a href='https://100loop.com/' style='border: 1px solid rgb(255, 0, 0);'>Site do 100loop.com<a>

Foi possível substituir o elemento e continuar a manipular e o versar.

Copie o Código

(function($){
    $.fn.extend({
        outerHTML : function( value ){

            // Replaces the content
            if( typeof value === "string" ){
                var $this = $(this),
                    $parent = $this.parent();

                var replaceElements = function(){

                    var element;
                    $( value ).map(function(){
                        element = $(this);
                        $this.replaceWith( element );
                    })

                    return element;

                }

            return replaceElements();

            // Returns the value
            }else{
                return $("<div />").append($(this).clone()).html();
            }

        }
    });
})(jQuery);

Chame o Método

$(document).ready(function(){

    // Retorna o elemento e todo o seu conteúdo
    alert($("div").outerHTML());

    // Substitui o elemento e mantém o novo elemento manipulável e versável
    $("div").outerHTML("<a href="http://darlesson.com/">Rei dos Darlessons</a>");

});

Até a próxima