jQuery - modificar cadena HTML

Question

¿Podría alguien decirme cómo puedo modificar el html antes de insertarlo en el documento?

Ésta es una llamada AJAX:

url: "http://localhost/cart/public/admin/album", 
success: function(html) { 

Este es el resultado de la llamada AJAX:

<div class="main-content slide-in"> 
    <h1>Create Album</h1> 
    <div class="inner"> 
    </div> 
</div> 

Todo lo que quiero hacer es cambiar el color de la etiqueta h1. He agregado este código

url: "http://localhost/cart/public/admin/album", 
success: function(html) { 
    $(html).find('h1').css('color','red'); 
    $('aside').after(html); 

Sin embargo, esto no tiene ningún efecto. Sin embargo, el selector jQuery parece estar funcionando.

url: "http://localhost/cart/public/admin/album", 
success: function(html) { 
    $(html).find('h1').css('color','red'); 
    console.log($(html).find('h1').length); 
    $('aside').after(html); 

Utilizando console.log salidas correctas 1. Por lo tanto, es encontrar el h1. Por alguna razón, aunque el estilo CSS no se está aplicando.

Estoy atascado. ¿Me estoy perdiendo un paso?

Answer 1

Parece que se está cambiando el color y luego añadir la cadena sin cambios a la DOM. Prueba esto:

success: function(html) { 
    var $html = $(html); 
    $html.find('h1').css('color','red'); 
    $('aside').after($html); 

Answer 2

Trate de añadir !important al estilo css:

$(html).find('h1').css("color", "red !important"); 

Answer 3

Prueba esto:

$(html).find('h1').css('color', 'red').parent().insertAfter('aside');

Answer 4

La respuesta aceptada aquí realmente desperdicia mucho de mi tiempo. Al menos no es genérico. Esto es lo que descubrí después de algún tiempo.

$.ajax({ 
    url: "http://localhost/~yoelusa/the-url-of-your-string.html", 
    success: function(htmldata) { 
    var $html = $("<div/>").append(htmldata); 
    // make your changes on the html string, see some example bellow relevant to my htmlstring 
    $html.find('#left').html(""); 
    $html.find('#right').html(""); 
    $html.find('.commentlist').remove(); 
    // when you are ready to insert your string somewhere call the html() function, in my example I inserted it in an iframe 
    $("iframe").attr("srcdoc", $html.html()); 
    } 
});