ダリの雑記：WEBプログラム版

HTML5では、以下の新しい要素が追加されています。

• article
• aside
• dialog
• figure
• footer
• header
• hgroup
• menu
• nav
• section

これらの要素とは一体なんなんだ？ということを、てっとり早く説明した記事がこちらになります。「html5を使ったブログのデザイン(HTML5.jp)」

さらに詳細を知りたい方はこのページへ。「HTML要素（HTML5.jp）」

さて、ここで問題となるのが、例によってIEではこれらの要素が実装されていないということです。これらにclassをつけてもそもそも要素として認識されないため、classにスタイルを設定しても無視されてしまいます。

そこで、javascriptの出番。Remy Sharp氏という方がこれらの要素を有効化できるプログラムを作ってくれていますので、その助けをかります。

headタグに以下の記述を追加してください。

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

もしくは

http://html5shiv.googlecode.com/svn/trunk/html5.js　

から「html5.js」をダウンロードして

<!--[if IE]>
<script src="html5.js"></script>
<![endif]-->

これで、最初に記述した新要素が使えるようになります。

今回参考にさせていただいたサイト

• HTML5.jp ： 該当記事「html5を使ったブログのデザイン(HTML5.jp)」「HTML要素（HTML5.jp）」
• クリエイティブ・タブロイド withD（ウィズ・ディー） ： 該当記事「HTML5の実践」

HTML5のCanvasを利用すると、棒グラフを表示することができます。（Javascriptが必要ですが）

やり方はこちら　JavaScript ライブラリー – HTML5.JP

上記のサイトから「graph_vbar_1_0_4.zip」をダウンロードして解凍すると、そのフォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。棒グラフが表示されるかと思います。

ただこのサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。

var items = [
    ["商品A", 20, 58, 40, 14, 38, 20, 40],
    ["商品B", 10, 14, 58, 80, 70, 90, 20],
    ["商品C", 10, 14, 58, 80, 70, 90, 20],
    ["商品D", 10, 14, 58, 80, 70, 90, 20],
    ["商品E", 10, 14, 58, 80, 70, 90, 20]
 ];

てことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。

とはいえ、jsファイルを直接変更する必要はありません。

あくまでhtmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_vbar_4.html」を改良して使用しました。（まずはサンプルを見たい方はこちら）

手順

１．bodyタグ内に、パラメータが入ったテーブルを記述してください。

※tableタグにid="graph"を忘れずに記述してください。

※theadタグとtbodyタグを忘れないよう注意してください。（theadタグはグラフのx軸の項目に使用します）

<table id="graph">
    <thead>
        <tr>
            <th>商品名</th>
            <th>商品概要</th>
            <th>日</th>
            <th>月</th>
            <th>火</th>
            <th>水</th>
            <th>木</th>
            <th>金</th>
            <th>土</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>商品Ａ</th>
            <td>商品概要</td>
            <td>20</td>
            <td>58</td>
            <td>40</td>
            <td>14</td>
            <td>38</td>
            <td>20</td>
            <td>40</td>
        </tr>
        <tr>
            <th>商品Ｂ</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
        <tr>
            <th>商品Ｃ</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
        <tr>
            <th>商品Ｄ</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
        <tr>
            <th>商品Ｅ</th>
            <td>商品概要</td>
            <td>10</td>
            <td>14</td>
            <td>58</td>
            <td>80</td>
            <td>70</td>
            <td>90</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

２．headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のvbar_graphという関数を追記してください。

※sample_graph_vbar_4.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。

<script type="text/javascript">
function vbar_graph(table_id, output_id, title_num, value_start_num, value_end_num, x_title, y_title){
   
    /*初期化*/
    var get_tr_array = new Array();
    var get_table_innerTag = new Array();
    var items = new Array();
    var x_title_array = new Array();
    var y_title_array = new Array();
   
    /*表のパラメータを取得*/
    graph_table = document.getElementById(table_id);
    get_tr_array = graph_table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
   
    for(i=0; i<get_tr_array.length; i++){
        get_table_innerTag = get_tr_array[i].getElementsByTagName("*");
       
        items[i] = new Array();
        items[i][0] = get_table_innerTag[title_num].innerHTML;
       
        num = 1;
        for(j=value_start_num; j<=value_end_num; j++){
            items[i][num] = parseInt(get_table_innerTag[j].innerHTML);
            num++;
        }
    }
   
    /*表のX軸・Y軸項目を取得*/
    //配列をリセットする
    delete get_tr_array;
    delete get_table_innerTag;
   
    //X軸
    x_title_array[0] = x_title;
    get_tr_array = graph_table.getElementsByTagName("thead")[0].getElementsByTagName("tr");
    get_table_innerTag = get_tr_array[0].getElementsByTagName("*");
   
    num = 1;
    for(j=value_start_num; j<=value_end_num; j++){
        x_title_array[num] = get_table_innerTag[j].innerHTML;
        num++;
    }
   
    //Y軸
    y_title_array[0] = y_title;
   

    /*グラフ出力*/
    var g = new html5jp.graph.vbar(output_id);
    if( ! g ) { return; }
    var params = {
        x: x_title_array,
        y: y_title_array,
        barShape: "line"
    };
    g.draw(items, params);
};
</script>

３．bodyタグは以下のように「onload="vbar_graph('graph', 'sample',0, 2, 8, '曜日', '注文数（個）')"」を実行するように記述してください。

<body onload="vbar_graph('graph', 'sample', 0, 2, 8, '曜日', '注文数（個）')">

※vbar_graph関数の引数について
function vbar_graph(table_id, output_id, title_num, value_start_num, value_end_num, x_title, y_title)

• table_id：パラメータが入っているtableタグのID（今回の例では「graph」）
• output_id：グラフ出力先のcanvasタグのID（今回の例では「sample」）
• title_num：「項目名」が入っている、テーブルの列番号（今回の例では１列目）
• value_start_num：「値（数値）」が入っている、テーブルの開始列番号（今回の例では３列目）
• value_end_num：「値（数値）」が入っている、テーブルの終了列番号（今回の例では９列目）
• x_title：グラフX軸の項目名（今回は「曜日」）
• y_title：グラフY軸の項目名（今回は「注文数（個）」）

列番号について：javascriptでは一番始めが0になるので、１列目は「0」、３列目は「2」、９列目は「8」になります。

以上でサンプルの様に表示されます。（サンプルではテーブルがしょぼかったので少しスタイルを追加しています）

サンプル [新しいウィンドウで開く]

ざっくりと改造なので粗があるかもしれませんが、ご了承ください。

※追記：グラフ出力について考慮されていなかったので、引数にoutput_idを付け足しました。(2010.07.21)

HTML5のCanvasを利用すると、円グラフを表示することができます。（Javascriptが必要ですが）

やり方はこちら　JavaScript ライブラリー - HTML5.JP

上記のサイトから「graph_circle_1_0_2.zip」をダウンロードして解凍すると、フォルダの中に「examples」フォルダがありますので、その中のサンプルを実行してみてください。円グラフが表示されるかと思います。

ただこのサンプルでは、スクリプト内に直接パラメータを配列で入力しなくてはなりません。

var items = [
    ["sample01", 150],
    ["sample02", 100],
    ["sample03", 80],
    ["sample04", 60],
    ["sample05", 30],
    ["sample06", 20],
    ["sample07", 10],
    ["sample08", 10],
    ["sample09", 10],
    ["sample10", 10],
    ["sample11", 10],
    ["sample12", 10]
];

これはちょっと面倒。

てことで、tableに入れたパラメータを吸い出してグラフ化するように変更しました。

とはいえ、jsファイルを直接変更する必要はありません。

あくまでhtmlファイルの中に記述するスクリプトを編集しただけです。今回は「sample_graph_circle_1.html」を改良して使用しました。（まずはサンプルを見たい方はこちら）

手順

１．bodyタグ内に、パラメータが入ったテーブルを記述してください。

※tableタグにid="graph"を忘れずに記述してください。

※tbodyタグを忘れないよう注意してください。（thead内のデータはグラフに影響を与えません。）

<table id="graph">
    <caption>アンケート結果</caption>
    <thead>
        <tr>
            <th>項目名</th>
            <th>概要</th>
            <th>値</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>sample01</th>
            <td>description</td>
            <td>150</td>
        </tr>
        <tr>
            <th>sample02</th>
            <td>description</td>
            <td>100</td>
        </tr>
        <tr>
            <th>sample03</th>
            <td>description</td>
            <td>80</td>
        </tr>
        <tr>
            <th>sample04</th>
            <td>description</td>
            <td>60</td>
        </tr>
        <tr>
            <th>sample05</th>
            <td>description</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

※「sample_graph_circle_1.html」は「sample12」までありますが、今回は「sample05」までにしました。

２．headタグ内のwindow.onload=function()の関数は、丸ごと削除して、以下のcircle_graphという関数を追記してください。

※sample_graph_circle_1.htmlでは「window.onload」で実行していますが、今回は関数化してbodyのonloadで読み込むことにしました。これは後々複数のグラフを表示する際、imgタグのonloadなどでも対応できるようにするためです。

<script type="text/javascript">
function circle_graph(table_id, output_id, title_num, value_num){
    //初期化
    var get_tr_array = new Array();
    var get_table_innerTag = new Array();
    var items = new Array();
   
    //パラメータを取得
    graph_table = document.getElementById(table_id);
    get_tr_array = graph_table.getElementsByTagName("tbody")[0].getElementsByTagName("tr");

    for(i=0; i<get_tr_array.length; i++){
        get_table_innerTag = get_tr_array[i].getElementsByTagName("*");
      
        get_title = get_table_innerTag[title_num].innerHTML;
        get_value = parseInt(get_table_innerTag[value_num].innerHTML);
      
        items[i] = [get_title, get_value];
    }
   
    //グラフ出力
    var cg = new html5jp.graph.circle(output_id);
    if(!cg) { return; }

    cg.draw(items);
}
</script>

３．bodyタグは以下のように「onload="circle_graph('graph', 'sample', 0, 2)"」を実行するように記述してください。

<body onload="circle_graph('graph', 'sample', 0, 2)">

※circle_graph関数の引数について
circle_graph(table_id, output_id, title_num, value_num);

• table_id：パラメータが入っているtableタグのID（今回の例では「graph」）
• output_id：グラフ出力先のcanvasタグのID（今回の例では「sample」）
• title_num：「項目名」が入っている、テーブルの列番号（今回の例では１列目）
• value_num：「値（数値）」が入っている、テーブルの列番号（今回の例では３列目）

 列番号について：javascriptでは一番始めが0になるので、１列目は「0」、３列目は「2」になります。

以上でサンプルの様に表示されます。（サンプルではテーブルがしょぼかったので少しスタイルを追加しています。）

サンプル [新しいウィンドウで開く]

ざっくりと改造なので粗があるかもしれませんが、ご了承ください。

プログラムの加算において、一般的には以下のように記述します。

• num = num + 1;
• num++;
• num += 1;

しかしJavascriptで数値を引数渡しにして上記のような加算をすると、とんでもない結果が返ってくることがあります。

失敗例のソース（再起処理）

<script>
   function changeInt_false(num){
      if(num >= 100){
         document.getElementById("text_false").innerHTML = num+"：以上失敗例でした。";
         return;
      }else{
         num = num + 1;
         document.getElementById("text_false").innerHTML = num;
         setTimeout("changeInt_false('"+num+"')", 20);
      }
   }
</script>

<h1>加算</h1>
<p><input type="button" onclick="changeInt_false(0)" value="加算スタート（失敗例）" /></p>
<p id="text_false"></p>

失敗例のサンプル　[新しいウィンドウで開く]

いかがでしょうか？

「111」となってしまいました。

要するに、文字列として繋いでしまっているわけですね。（javascriptの「+」は加算の他に文字列をつなぐという役割も果たします。）

こういうときは、parseInt()を利用して、引数から得た情報をInt型にキャストしてあげましょう。

成功例のソース（再起処理）

<script>
   function changeInt_success(num){
      num = parseInt(num);
      if(num >= 100){
         document.getElementById("text_success").innerHTML = num+"：成功！";
         return;
      }else{
         num = num + 1;
         document.getElementById("text_success").innerHTML = num;
         setTimeout("changeInt_success('"+num+"')", 10);
      }
   }
</script>

<h1>加算</h1>
<p><input type="button" onclick="changeInt_success(0)" value="加算スタート（成功例）" /></p>
<p id="text_success"></p>

成功例サンプル [新しいウィンドウで開く]

これで正常に加算されたかと思います。

ちなみに小数点を使う場合はparseFloat()を利用してください。

■追記

その２ができました。

Bingのトップページのギミックが面白いなぁと思い、なんとかできないかと模索中。
たぶんsetTimeoutかsetInterval使ってるんだと思うけど、割り込み処理のやり方がいまいちわからない。
とりあえずテストバージョン

■コード

<script>
window.onload = function(){
//初期化
browser_type = browser();
if(browser_type == "MSIE"){
document.getElementById("fade01").style.filter = "alpha(opacity=0)";
document.getElementById("fade02").style.filter = "alpha(opacity=0)";
document.getElementById("fade03").style.filter = "alpha(opacity=0)";
document.getElementById("fade04").style.filter = "alpha(opacity=0)";
}else if(browser_type == "Firefox"){
document.getElementById("fade01").style.MozOpacity = 0;
document.getElementById("fade02").style.MozOpacity = 0;
document.getElementById("fade03").style.MozOpacity = 0;
document.getElementById("fade04").style.MozOpacity = 0;
}else{
document.getElementById("fade01").style.opacity = 0;
document.getElementById("fade02").style.opacity = 0;
document.getElementById("fade03").style.opacity = 0;
document.getElementById("fade04").style.opacity = 0;
}

//オートフェード
setTimeout("fadeIn('fade01')",1000);
setTimeout("fadeOut('fade01')",2000);
setTimeout("fadeIn('fade02')",1000);
setTimeout("fadeOut('fade02')",2100);
setTimeout("fadeIn('fade03')",1000);
setTimeout("fadeOut('fade03')",2200);
setTimeout("fadeIn('fade04')",1000);
setTimeout("fadeOut('fade04')",2300);
}

//フェードイン
function fadeIn(id_name){
fadeAction(id_name, "plus", 0);
}

//フェードアウト
function fadeOut(id_name){
fadeAction(id_name, "minus", 100);
}

//フェード関数
function fadeAction(id_name, vector, set_op){
set_op = parseInt(set_op);
elem = document.getElementById(id_name);
browser_type = browser();
if(browser_type == "MSIE"){
elem.style.filter = "alpha(opacity="+set_op+")";
}else if(browser_type == "Firefox"){
elem.style.MozOpacity = set_op / 100;
}else{
elem.style.opacity = set_op / 100;
}
if(vector == "minus"){
set_op -= 20;
if(set_op < 0) return;
setTimeout("fadeAction('"+id_name+"', 'minus', '"+set_op+"')",20);
}else if(vector == "plus"){
set_op += 20;
if(set_op >= 100) return;
setTimeout("fadeAction('"+id_name+"', 'plus', '"+set_op+"')",20);
}
}

//ブラウザ判別
function browser(){
if(navigator.userAgent.indexOf("Opera") != -1){
type = "Opera";
}else if(navigator.userAgent.indexOf("MSIE") != -1){
type = "MSIE";
}else if(navigator.userAgent.indexOf("Firefox") != -1){
type = "Firefox";
}else if(navigator.userAgent.indexOf("Netscape") != -1){
type = "Netscape";
}else if(navigator.userAgent.indexOf("Safari") != -1){
type = "Safari";
}else{
type = "none";
}
return type;
}
</script>

<p id="fade01" style="width:100px; cursor:default;" onmouseover="fadeIn('fade01');" onmouseout="fadeOut('fade01');">フェード１</p>
<p id="fade02" style="width:100px; cursor:default;" onmouseover="fadeIn('fade02');" onmouseout="fadeOut('fade02');">フェード２</p>
<p id="fade03" style="width:100px; cursor:default;" onmouseover="fadeIn('fade03');" onmouseout="fadeOut('fade03');">フェード３</p>
<p id="fade04" style="width:100px; cursor:default;" onmouseover="fadeIn('fade04');" onmouseout="fadeOut('fade04');">フェード４</p>

注意点として、フェードさせるブロックにはwidthを指定していないと、IEにてopacityが効きません。

サンプルはこちら　[新しいウィンドウで開く]

※以後サンプルはさくらインターネットの自分用サーバにアップします。

システムを作っている時、機能についての説明を表示したい。でもページに表示するとうっとおしい。
てなことで、「ヘルプ」にマウスオーバーした時にバルーンを表示させる方法を覚書ます。

一番簡単なのはこちら→Balloon tooltip

ただ、これだと画像を入れたり、あまり多くの文字を入れられなさそうな感じがしたので作ってみました。
要はあらかじめ「display:none;」にしてあるブロックをマウスオーバーで表示させればよいわけです。
プラスして今回はカーソルにバルーンが付いてくるようにしました。

<script>

//ブラウザ判定用
function browser(){
    if(navigator.userAgent.indexOf("Opera") != -1){
        type = "Opera";
    }else if(navigator.userAgent.indexOf("MSIE")!=-1 
    && navigator.userAgent.indexOf("Trident/4.0")!=-1){
        type = "MSIE8";
    }else if(navigator.userAgent.indexOf("MSIE") != -1){
        type = "MSIE";
    }else if(navigator.userAgent.indexOf("Firefox") != -1){
        type = "Firefox";
    }else if(navigator.userAgent.indexOf("Netscape") != -1){
        type = "Netscape";
    }else if(navigator.userAgent.indexOf("Safari") != -1){
        type = "Safari";
    }else{
        type = "none"; 
    }
    return type;
}

//バルーンブロック表示用
function balloon_showblock(Target, TopPos, LeftPos){
    if(browser() == "MSIE"){
        document.onmousemove = iMouseIE;
    }else if(browser() == "MSIE8"){
        document.onmousemove = iMouseIE8;
    }else{
        document.onmousemove = iMouseFirefox;
    }

    function iMouseFirefox(evt){
        Xpos = evt.pageX-LeftPos;
        Ypos = evt.pageY-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    function iMouseIE(){
        Xpos = event.x+(document.body.scrollLeft || document.documentElement.scrollLeft)-LeftPos;
        Ypos = event.y+(document.body.scrollTop || document.documentElement.scrollTop)-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    function iMouseIE8(){
        Xpos = event.x-LeftPos;
        Ypos = event.y-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    document.getElementById(Target).style.display = "";
}

//バルーンブロック非表示用
function hide_block(Target){
    document.getElementById(Target).style.display = "none";
}

</script>

<div id="hoge5" style="position:absolute; display:none;">Javascriptでバルーン表示します。</div>

<p><a href="javascript:void(0)" onmouseover="balloon_showblock('hoge5', 30, 30)" onmouseout="hide_block('hoge5')">ヘルプ</a></p>

Javascriptの関数から説明いたしますと
・function browser()
　ブラウザ判定用。
　アクセスしてきたブラウザがIE、FF、Opera、Netscape、Safariのどれか判定します。

・function balloon_showblock(Target, TopPos, LeftPos)
　バルーンを表示に切り替え、カーソルに追随させる。以下引数の説明。
　Target：バルーンとなるブロックのID。
　TopPos：上下の調整（px）。
　LeftPos：左右の調整（px）。

・function hide_block(Target)
 バルーンを非表示に切り換える。
 Target：バルーンとなるブロックのID。

ここでなぜ、わざわざブラウザを判定しなければならないかと言うと、IEとFFでは位置の取得方法が違うからです。今回はカーソルにバルーンが付いてくる設定にしてますのでブラウザによってプログラムを切り替える必要がありました。

バルーンとなるブロックには「Javascriptでバルーン表示します。」という説明を入れ、idを「hoge5」にしました。またあらかじめ非表示にするためstyleに「display:none;」を、さらに他のレイアウトに影響を与えなくするため「position:absolute;」を記述しています。

バルーンの表示スイッチとなる「ヘルプ」のリンクタグには
・onmouseover="balloon_showblock('hoge5', -30, -30)"
・onmouseout="hide_block('hoge5')"
を記述します。

■サンプル　[新しいウィンドウで開く]　※サンプルは上記のソースに少し手を加えています。

単純ですが、よく使用するプログラムなので。
要するに、javascriptによるstyleの切り替えです。

<script>
function show_block(){
   if(document.getElementById("hoge").style.display == ""){
      document.getElementById("hoge").style.display = "none";
   }else{
      document.getElementById("hoge").style.display = "";
   }
}
</script>

<p><a href="javascript:void(0)" onclick="show_block();">表示切替</a></p>
<div id="hoge" style="display:none;">こっち見んな！</div>

１．id="hoge"は、あらかじめdisplay:none;で、非表示にしておく。
２．show_block関数では、id="hoge"のdisplayが空（表示モード）ならばnone（非表示モード）に、noneならその逆という風にする。

■サンプル　[新しいウィンドウで開く]

2016年4月30日 jquery版はこちら

Javascriptでプルダウンの選択を変更するのは、テキストフォームにデータを突っ込むんだり、ラジオボタンの選択を変更するのとは違い少々面倒です。

<script>
function change_pulldown(){
pulldown_option = document.getElementById("hoge").getElementsByTagName('option');
for(i=0; i<pulldown_option.length;i++){
if(pulldown_option[i].value == "クラブマンハイレッグ"){
pulldown_option[i].selected = true;
break;
}
}
}
</script>

<p><a href="javascript:void(0)" onclick="change_pulldown()">「クラブマンハイレッグ」を選択</a></p>

<select id="hoge">
<option value="イングラム">イングラム</option>
<option value="グリフォン">グリフォン</option>
<option value="タイラント2000">タイラント2000</option>
<option value="クラブマンハイレッグ">クラブマンハイレッグ</option>
</select>

簡単に説明しますと以下のようになります。

１．selectにidをつける（ここでは"hoge"にしました）
２．そのタグの中にあるoptionタグのデータを、getElementsByTagName('option');で配列取得する
３．取得したoptionデータをforループでまわし、optionのvalueデータと選択させたい内容とをifで照らし合わせ、一致したらselected=trueにする。

■サンプル　[新しいウィンドウで開く]　※サンプルは上記のソースに少し手を加えています。

例えば

<div id="hoge">ほげ</div>

とあり、id="hoge"のdivタグで囲まれている部分の内容を取得する場合は、innerHTMLを使用します。

<script>
function get_data(){
   //データ取得
   data = document.getElementById("hoge").innerHTML;
   //データ出力
   document.write("実行結果："+data);
}
</script>

<p><a href="javascript:void(0)" onclick="get_data()">関数実行</a></p>
<div id="hoge">ほげ</div>

このようにスクリプトを記述し、「関数実行」を押せば「実行結果：ほげ」が表示されます。（このソースだと地味なんでわかりにくいですが^^;）

なおinnerHTMLはデータを取得するだけでなく、指定したidを持つタグに出力することもできます。

<script>
function get_data(){
   //データ取得
   data = document.getElementById("hoge").innerHTML;
   //データ出力
   document.getElementById("output").innerHTML = data;
}
</script>

<p><a href="javascript:void(0)" onclick="get_data()">関数実行</a></p>
<div id="hoge">ほげ</div>
<div id="output"></div>

というようなソースにすれば、id="hoge"のデータを取得後、id="output"に取得したデータを表示させることができます。
ちなみにこのinnerHTMLによる出力、id="output"のタグにあらかじめ内容が記述されていたとしても、javascriptの実行結果が優先され、中身がすり替わって表示されます。（サンプル参照）

■サンプル [新しいウィンドウで開く]