すでにいくつかのentriesで使っているのですが、かなり便利なので改めて紹介。

表示元

  1. 表示したいHTMLを適当にdivタグで囲ってidを振っておく。ここではhtml2show
  2. 表示先として空のpreを作っておき、そこにもidを振っておく。ここではhtmlsrc
  3. 以下のようなscriptを、preタグの直下に転がしとく
    (function(src, dst){
        dst.appendChild(document.createTextNode(src.innerHTML))
    })(
        document.getElementById('html2show'),
        document.getElementById('htmlsrc')
    );
    
  4. もちろん以下のようにしてもOK
    (function(srcid, dstid){
        $ = function(id){ return document.getElementById(id) };
        $(dstid).appendChild(document.createTextNode($(srcid).innerHTML))
    })('html2show','htmlsrc')
    

表示先



見ての通り、google-code-prettifyとかとも共存できます。少なくともFirefoxとSafariとOperaできちんと動きます(ただしタグが大文字になったり小文字になったりというブラウザーによる微妙な差はあります)。

Enjoy!

Dan the DHTML (ab)?user