Changing Html Content Using Jquery

I need to change this HTML:

• 1
<

Solution 1:

There are far more elegant ways to do this, but here's a quick-and-dirty solution you might try. Assuming the output is inside a div with a class of 'output':

//Loop over list items
$('.wp-pagenavi ul').each(function(i, obj) {
    var position = i + 1;
    if($(this).hasClass('active')) {
        $('.output').append('<span class="current">'+position+'</span>');
    }
    else {
        $('.output').append('<a href="#" class="page">'+position+'</a>');
    }
});

//Don't need this anymore
$('.wp-pagenavi ul').remove();

Solution 2:

must it be with jquery ?? what about simple javascript with innerHTML like this:

<ulid="myUl"><liclass="active">
        Original Content
    </li></ul><scriptlanguage="Javascript">document.getElementById('myUl').innerHTML = '<span>Content replaced blah blah      </span>';
</script>

(For simplicity I added the id attribute, but you get the idea)

Share