jQuery - modify HTML string

Question

Could someone tell me how I can modify the html before I insert it into the document?

This is an AJAX call:

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

This is the result of the AJAX call:

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

All I want to do is change the color of the h1 tag. I have added this code

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

However this has no effect. The jQuery selector does seem to be working though.

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);

Using console.log correct outputs 1. So it is finding the h1. For some reason though the css style isn't being applied.

I am bit stuck. Am I missing a step?

Are you trying to change the text color or the background color? — Rob Allen
– Rob Allen, Commented Oct 26, 2011 at 14:56
Your code should work, are you sure your page does not contain any rules to hide the elements you are adding? — Yuri Ghensev
– Yuri Ghensev, Commented Oct 26, 2011 at 15:03
Is there any compelling reason not to add it to the DOM and then change its css? — Cloudy
– Cloudy, Commented Oct 26, 2011 at 15:46

Tetaxa · Accepted Answer · 2011-10-26 15:10:02Z

17

Looks like you're changing the color and then adding the unchanged string to the DOM. Try this:

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

answered Oct 26, 2011 at 15:10

Tetaxa

4,4031 gold badge21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kato Over a year ago

great answer :) it could be simplified as follows: $html.find('h1').css('color', 'red').end().insertAfter('aside')

Scott Stevens Over a year ago

Note: If you want the root element from the string, you can't use find on it, since the variable is the root element.

Yoel Garcia · Accepted Answer · 2013-12-31 02:04:17Z

3

The accepted answer here actually wasted quite a lot of my time. At least it isn't generic. This is what figured out after sometime.

$.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() );
  }
});

answered Dec 31, 2013 at 2:04

Yoel Garcia

1731 silver badge8 bronze badges

Comments

leo.vingi · Accepted Answer · 2011-10-26 16:18:37Z

2

Try this:

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

edited Oct 26, 2011 at 16:18

answered Oct 26, 2011 at 15:01

leo.vingi

1,8421 gold badge12 silver badges17 bronze badges

1 Comment

Kato Over a year ago

this would only insert the h1 and not the entire html element

James Johnson · Accepted Answer · 2011-10-26 14:55:52Z

0

Try adding !important to the css style:

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

answered Oct 26, 2011 at 14:55

James Johnson

46.1k8 gold badges75 silver badges111 bronze badges

1 Comment

Дамян Станчев Over a year ago

You can't use !important in a .css call.

Collectives™ on Stack Overflow

jQuery - modify HTML string

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related