Chris Coyier

a[href^="mailto:"]:before { content: "\2709"; }
.phone:before             { content: "\2706"; }
.important:before         { content: "\27BD"; }
blockquote:before         { content: "\275D"; }
blockquote:after          { content: "\275E"; }
.alert:before             { content: "\26A0"; }

<p>
  <a href="mailto:[email protected]">
    [email protected]
  </a>
</p>

<p class="phone">
    555-555-5555
</p>

Elements with the contenteditable attribute can be live-edited right in the browser window. But of course those changes don’t affect the actual document on your server, so those changes don’t persist with a page refresh.

One way to save the …

if (top.location!= self.location) {
   top.location = self.location.href;
}

That will generally work, but there is a small chance of failure in the case that window is overridden. Here’s a couple of clever alternatives from Nathan Smith:

<script>

// Break 

If you are going library-free, you might need to roll your own function like this.

function addClass(id,new_class){
       var i,n=0;

       new_class=new_class.split(",");

       for(i=0;i<new_class.length;i++){
               if((" "+document.getElementById(id).className+" ").indexOf(" "+new_class[i]+" ")==-1){
                       document.getElementById(id).className+=" "+new_class[i];
                       n++;
               }
       }

       return n;
}

Usage

<div id="changeme" class="big red"></div>
<button