外部ファイルから 1つのブロックや文言などを
JavaScriptで書き出す手法を便利に使うことがありますが、
（例：更新頻度の高いバナーの置き換え、共通ナビゲーションの書き出し　など）
一度に複数の文言を書き換えたい事例がありましたので、まとめてみました。
　

●目的
・更新頻度の高いアンケートフォームの
　「応募締切日」「掲載号」「設問(1)」「設問(2)」「設問(3)」を
　外部ファイル 1ファイルで管理したい。
　※フォームの挙動に関わる部分は固定。

・外部ファイル化することで先方の担当者が更新できるため、
　コストと制作時間が削減できる。
　

●作成方法
（1） jQueryを使用します。
アンケートフォームのHTMLを以下のように調整。


■HTML
HEAD内： jQueryへのリンクを追加。

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/text.js"></script>

BODY内： 「外部ファイルで管理する文言」を表示したい部分に 空div を追加。

<div id="shimekiri"></div>
<div id="keisai"></div>
<p id="question1"></p>
<p id="question2"></p>
<p id="question3"></p>

（2） 外部ファイルで管理する文言を設定します。

■外部ファイル （js/text.js）

$(function(){

// 応募締切日
$("#shimekiri").text("2011年11月23日");

// 掲載号
$("#keisai").text("2011年11月17日号");

// 設問(1)
$("p#question1").text("（1）今週号のご感想をお聞かせください。");

// 設問(2)
$("p#question2").text("（2）天神橋筋商店街でお気に入りのお店はありますか？または行ってみたいお店を教えてください。");

// 設問(3)
$("p#question3").text("（3）現在、気になっているお店・場所・地域はありますか？（例：JR大阪駅界隈）");

// レイアウト調整用CSS
$("p#question1").css("width","300");
$("p#question2").css("width","300");
$("p#question3").css("width","300");

});

※「レイアウト調整用CSS」は、この案件で使用したレイアウトでは、
設問の文言が長すぎた場合にレイアウトが崩れてしまったので、
適切に改行するようにCSSで調整しました。
特に必要なければ削除してください。
　

（3） 次回更新時より、「text.js」の上書きのみで更新ができます。