Change value of html element with external javascript

Question

Below is the div that I want to alter

<div id="@page.Page" class="pageMessages" data-messages='@Html.Raw(new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(@page.Messages))'></div> 

I want to change the value of the message when a javascipt function is called from an external .js file. What is the correct way to do this?

Answer 1

Like So...

// This Performs the Change
$('#changeme').attr('data-messages', 'New Value');

// Show the Change
$('#changeme').html( $('#changeme').attr('data-messages') );

Here is a Working Fiddle

The one problem I see is the id='@page.Page' , this doesnt work.