JavaScript JSファイルで定義した変数をHTML側で表示する方法

WEB上のJSONデータを取得してjsonという変数に代入しました。
しかし、document.write(json.value)以外で表示する方法が分かりません。

どうすれば良いでしょうか？

将来的には、APIを元に作成しているガジェットをEmbedできる形式にする予定です。

どうかご教示して頂けたら幸いです。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="content-language" content="ja">
6<script type="text/javascript" src="http://www/gadgets.js"></script>
7<title>Gadgets</title>
8</head>
9<body>
10</body>
11</html>
12

javascript
1var xhr = new XMLHttpRequest();
2// XMLHttpRequestオブジェクトの生成
3var timerId = window.setTimeout(function() { // setTimeout: 一定時間後にabortメソッドを実行することでタイムアウトを実現
4  xhr.abort(); //abort: リクエストキャンセルするためのメソッド
5}, 5000); // 5000: 5秒
6xhr.onreadystatechange = function() {
7  // onreadystatechange: オブジェクトのready状態が変化したときに発生する
8  // ready: ready関数を使用してDOMがロードされて操作・解析が可能になったタイミングで関数を実行すること
9  // DOM: xmlやhtmlの各要素のことである。例えば、<p>や<img>などの要素にアクセスする仕組み
10  if (xhr.readyState === 4) { // readyState 4: サーバーからレスポンス受信完了
11    window.clearTimeout(timerId); // タイムアウト処理をキャンセルする
12    if(xhr.status === 200) { // OK（リクエストは成功し、レスポンスと共に要求に応じた情報が返される）
13      var json = JSON.parse(xhr.responseText || "null");
14      // JSONを受け取る場合は、responseTextプロパティの内容をJSONに変更する必要がある。こんな時に、JSON.parseメソッドを使う
15      var imageUrl = XXXXX.XXXXX;
16      var acmNm = XXXXX.XXXXX;
17      var smallAreaNm = XXXXX.XXXXX;
18    }
19  }
20}
21xhr.open('GET', 'URL', true); // true: XMLHttpRequestは非同期通信で行われる
22xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
23// setRequestHeader: リクエストヘッダを設定するメソッド
24// リクエストヘッダ: リクエストと共に送る情報。HTTPメソッドの次の行から付加する文字列を「リクエストヘッダ」と呼ぶ
25xhr.send(null); // 実際にサーバーへリクエストを送信するメソッド。POSTする際は、引数に指定したデータがサーバーに送信される。GET及びHEADの場合はデータを送信する必要がないので「null」
26