Change outerHTML in javascript or jquery

Question

I want to change the outerHTML and this is what I do:

$(data.description)[0].outerHTML = $(data.description)[0].outerHTML.replace('red', 'black');

The value is:

$(data.description)[0].outerHTML: "<p style="color: red;">desc1</p>"

and it doesn't get changed. How to change it?

data.description has this value:

<p style="color: red;">desc1</p><p style="color: red;">desc2</p>

And I want only $(data.description)[0] changed.

Here is my whole code:

var ingsLines = $(data.description);
for (var i =0; i < ingsLines.length; i++) {
    if (someCondition) {
        $(data.description).eq(i).css('color', 'black');
    }
}
try{$('#myTextarea').html(data.description);}catch(err){}

And the code changes the value, it puts black instead of red, but data.description stays with red.

Not, it's read-only. Use jQuery's replaceWith instead.

Rob W
– Rob W

2012-10-30 10:06:38 +00:00
Commented Oct 30, 2012 at 10:06 — Rob W
– Rob W, Commented Oct 30, 2012 at 10:06

Ram · Accepted Answer · 2012-10-30 10:17:41Z

1

If you want to change the color property of the first element, you can use css and eq methods:

$(data.description).eq(0).css('color', 'black');

edited Oct 30, 2012 at 10:17

answered Oct 30, 2012 at 10:09

Ram

145k16 gold badges174 silver badges201 bronze badges

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

6 Comments

Denys Séguret Over a year ago

I suppose OP wanted to change all occurrences, not just the color in the style.

Ram Over a year ago

@Srcee It depends on whether you append the markup or not, this doesn't change the property of your data object, can you provide a demo on jsfiddle.net?

petko_stankoski Over a year ago

Ok can you please see my edited question again. Your code changes the color, but it still doesn't work - the text in my textarea stays red.

Ram Over a year ago

@Srcee The color of text of textarea remains red because you cannot append an element to it, it only accepts text content.

petko_stankoski Over a year ago

So how can I convert element to text?

|

Denys Séguret · Accepted Answer · 2012-10-30 10:18:19Z

1

Use

$(data.description).replaceWith(function(){
    return this.outerHTML.replace('red', 'black')
});

Demonstration

If you want to change only first one, you may use this :

$(data.description).eq(0).replaceWith(function(){
    return this.outerHTML.replace('red', 'black')
});

edited Oct 30, 2012 at 10:18

answered Oct 30, 2012 at 10:09

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

3 Comments

petko_stankoski Over a year ago

@dystroy But you code changes the color of the whole data.description, I want it to change only the line with [i] index

petko_stankoski Over a year ago

And then do I need to call this replaceWith method somehow?

petko_stankoski Over a year ago

Ok can you please see my edited question again. Your code changes the color, but it still doesn't work - the text in my textarea stays red.

Collectives™ on Stack Overflow

Change outerHTML in javascript or jquery

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related