IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

[JavaScript]リロードなしでHTML表記をロード時に戻す

JavaScriptでいろいろ操作したHTMLをリロードせずにロード時の表示状態に戻す方法です。
戻したい箇所のロード時のHTMLを覚えておいて、セットするだけです。

例)body内をボタン押下で元に戻す。
〈JavaScript〉

// 初期HTML記述をセット
var defaultHTML;
function DefaultSave() {
  defaultHTML = document.body.innerHTML;
}
// HTML記述を初期状態に戻す
function HTMLRestore() {
  document.body.innerHTML = defaultHTML;
}

〈HTML〉
onloadで初期HTMLを保存する関数を呼び出します。

<body onload="DefaultSave()">

ボタン押下で初期状態に戻す関数を呼び出します。

<input type="button" value="元に戻す" onclick="HTMLRestore()">

body全体ではなく、「main_wrap」というid内だけ元に戻したい場合はJavaScriptを以下のようにすれば実現できます。

// 初期HTML記述をセット
var defaultHTML;
function DefaultSave() {
  defaultHTML = document.getElementById('main_wrap').innerHTML;
}
// HTML記述を初期状態に戻す
function HTMLRestore() {
  document.getElementById('main_wrap').innerHTML = defaultHTML;
}

参考サイト
http://okwave.jp/qa/q1523858.html