Replacing inner div content?

Question

I'd like to replace the following inner div content:

<div class="price"><span class="unit">$</span>37</div>

with this:

<del>$37</del> $19

The $37 gets striked through and the new price is displayed next to it. The above <div> is generated dynamically.

I have tried the following but it isn't doing anything:

$( "div.price" ).replaceWith("<del>$37</del> $19");

I'm trying this in jquery but is there a way to do it in angular? I guess the issue with angular is that I can't add directives to the above code.

all those values (i.e., 37) are hard-coded? you are not binding them to any variables you can access in your controller? — PlantTheIdea
– PlantTheIdea, Commented Mar 13, 2015 at 14:12
That is correct. You set those values up on the back end in a Wordpress theme element. — 4thSpace
– 4thSpace, Commented Mar 13, 2015 at 14:14
@VladuIonut: Not working - plnkr.co/edit/HoDQUsoUlL51M4THlQDN?p=preview — 4thSpace
– 4thSpace, Commented Mar 13, 2015 at 14:16
You need to make the sure the DOM has loaded before running the script. So put the script beneath the body, or wrap it in a window.load — em_
– em_, Commented Mar 13, 2015 at 14:18

Vladu Ionut · Accepted Answer · 2015-03-13 14:17:58Z

4

run the code on document ready

// Code goes here
$(function(){
$( "div.price" ).html("<del>$37</del> $19") 
});

answered Mar 13, 2015 at 14:17

Vladu Ionut

8,2231 gold badge23 silver badges30 bronze badges

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

2 Comments

$(function(){ }); is same with $( document ).ready(function() { }); learn.jquery.com/using-jquery-core/document-ready