javascriptでhtmlのタグを作成したい。

Question

###前提・実現したいこと
javascriptにてHTMLにて作成して、ブラウザで反映させたいです。

まず文字変換jsにて問題を作成、解説したいものをkeywordとして登録し、問題文にそのkeywordが含まれて
いる場合は、自動で変換し、HTMLに表示させる。
文字変換用jsにて keywordと問題文を作成。
↓
HTMLに反映させるjsでinnerHTMLにてブラウザに表示。(innerHTMLを使えば反映されると考えてます。)
↓
CSSで文字の色を変化させたいです。

別にこの形式にこだわりがなく、もっといい方法があればご教授願います。

###発生している問題・エラーメッセージ

うまく反映できないです。タグの部分は表示されています。

###該当のソースコード

------------------------------------文字変換用js----------------------------------------------
 var str_q = new String();
 var str_exca_a = new String();
 var str_miss_a = new String();
 var i = 0;
 var keystart = null;
 var keyend = null;
 key1start ="<span id=\"keyword1\">";
 key2start ="<span id=\"keyword2\">";
 keyend ="</span>";

var keyword = {
    徐行:key1start + "徐行(すぐに停止できる速度:何kmとかはない)" + keyend,
    車両横断禁止:"車両横断禁止(しゃりょうおうだんきんし)",
    緊急自動車:"緊急自動車(きんきゅうじどうしゃ：パトカー、救急車、消防車)"
};

function keyword_replace(i) {
    var str_q = q[i];

    str_q = str_q.replace("徐行",keyword.徐行);
    str_q = str_q.replace("車両横断禁止",keyword.車両横断禁止);
    str_q = str_q.replace("緊急自動車",keyword.緊急自動車);
    q[i] = str_q;
   var str_exac_a = exac_a[i];
    str_exac_a = str_exac_a.replace("徐行",keyword.徐行);
    str_exac_a = str_exac_a.replace("車両横断禁止",keyword.車両横断禁止);
    str_exac_a = str_exac_a.replace("緊急自動車",keyword.緊急自動車);
    exac_a[i] =str_exac_a ;

    var str_miss_a = miss_a[i];
    str_miss_a = str_miss_a.replace("徐行",keyword.徐行);
    str_miss_a = str_miss_a.replace("車両横断禁止",keyword.車両横断禁止);
    str_miss_a = str_miss_a.replace("緊急自動車",keyword.緊急自動車);
    miss_a[i] = str_miss_a;
}
------------------------------------------HTML反映部分のjavascript--------------------------
    document.getElementById('que').innerHTML = q[i]; //test_1.jsの配列をそのまま取り込む
    //問題の配置をランダムにする。
    rand = Math.floor(Math.random() * 9);
    judge = rand % 2;
    //console.log("rand:"+rand);
    //console.log("judge:"+judge);
    if (judge == 0) {
        document.getElementById('choice1').nextSibling.nodeValue = exac_a[i]; //同上
        document.getElementById('choice2').nextSibling.nodeValue = miss_a[i]; //同上
    } else if (judge == 1) {
        document.getElementById('choice1').nextSibling.nodeValue = miss_a[i]; //同上
        document.getElementById('choice2').nextSibling.nodeValue = exac_a[i]; //同上
        //document.querySelector('label[for="choice1"]').innerHTML="選択肢B";
    }
---------------------------------------------問題文.js(追加)---------------------------------
var q = new Array();
var miss_a = new Array();
var exac_a = new Array();

q[0] = "1:交差点内を徐行しているとき、緊急自動車が近づいてきたので直ちに交差点内で徐行した。";
exac_a[0] = "○：緊急自動車が入ってきた場合の交差点内での停止は事故を起こす可能性が高まるので、交差点を避け、事故の起こりにくい道路の左側に寄って一時停止をする";
miss_a[0] = "×：交差点内を通行しているとき緊急自動車が近づいてきたので直ちに交差点内で徐行した";

q[1] = "2:原動機自転車においてブレーキをかける場合は、ハンドルを切っていない状態で車体が傾いていないときには前後輪のブレーキを同時にかけるのがよい。";
exac_a[1] = "○：前後輪のブレーキを同時にかけるのが基本であるので、転倒の危険が問題がない場合は、ブレーキは同時にかけるべきである。";
miss_a[1] = "×：ブレーキの前後輪の同時使用は、条件を満たした場合にかけるのが、基本であるが危険時だけであり、極力使用せず、基本的には後輪のみのほうがよい。";

q[2] = "3:車両横断禁止の標識があったが道路の左側にある自分の車庫に入るため左に横断した。";
exac_a[2] = "○：左折を伴う道路の横断は、道路交通法上認められています";
miss_a[2] = "×：車両横断禁止の標識がある場所では、横断が禁止である。";

q[3] = "4:黄色の杖を持っている歩行者がいるときは、必ず警音器を鳴らさなければならない";
exac_a[3] = "○：杖使用者は弱視又は全盲者が用いるため、急な対応が難しく警音器のみの警告ではなく、一時停止か徐行を行う。";
miss_a[3] = "×：黄色の杖を持つ歩行者には、最大限注意を促す必要があるため、警音器まで鳴らすべきである。";

q[4] = "5.上り坂の頂上付近徐行の標識がなくても徐行しなくてはならない。";
exac_a[4]= "○：標識がなくても元々見通しが悪いため、徐行しなければならない";
miss_a[4]= "×：標識がないので、必ずしも徐行する必要がない";

------------------------------------------文字表示のHTML部分----------------------------------
  <h1>問題集1</h1>
        <p id="que">ここに問題が表示されます</p>
        <form id="radiobuttom">
          <div>
              <input id="choice1" type="radio" name="choice" >○○○<br>
              <input id="choice2" type="radio" name="choice" >×××<br>
              <input type="button" value="回答する" onclick="button_click();">
              <input type="button" value="終了" onclick="end_study(4);">
              <p id="answer"></p>
              <p id="last"></p>
          </div>
      </form>

.keyword1{
	color:#ff0000;
}

###試したこと

ブラウザには<span id="keyword1">文字列</id>で表示されていますが、文字列で表示されています。

Comments

[yamato_hikawa]

qという変数を何気なく使っているが定義が見当たらない。
差し支えなければ問題文のサンプル（テスト用でいいので）がほしいです。

[michiaki]

ｑはC言語のExtern的に使用しており、問題文にて定義しておりました。
修正いたしました。

Answer 1

ロード時に一度ランダム出題＋キーワードをセットする所まで作りました。
何らかのイベント時（ボタンを押すなど）にthis.setQuestion()を再度実行すれば、別の問題を出題する形となります。
サンプルとして、ランダムに出題するボタンを追加しました。

<h1>問題集1</h1>
<p id="que"></p>
<div id="keyword"></div> <!-- キーワード説明用領域を作っておく -->
<form id="radiobuttom">
  <div>
    <input id="choice1" type="radio" name="choice">○○○<br>
    <input id="choice2" type="radio" name="choice">×××<br>
    <input type="button" value="回答する" onclick="button_click();">
    <input type="button" value="終了" onclick="end_study(4);">
    <p id="answer"></p>
    <p id="last"></p>
  </div>
</form>

<button id="next" class="btn">次の問題</button>

.keyword {
  color: #ff0000;
}

var Question = function() {
  this.init();
};

Question.prototype = {
  KEYWORD: {
    徐行: "徐行(すぐに停止できる速度:何kmとかはない)",
    車両横断禁止: "車両横断禁止(しゃりょうおうだんきんし)",
    緊急自動車: "緊急自動車(きんきゅうじどうしゃ：パトカー、救急車、消防車)"
  },
  Q: [
    '徐行テスト',
    '徐行、車両横断禁止',
    '緊急自動車と徐行',
    '徐行・緊急自動車・車両横断禁止'
  ],
  init: function() {
    this.que = document.getElementById('que');
    this.keywordList = document.getElementById('keyword');
    this.btn = document.getElementById('next');

    // キーワードのキー部分を配列として取得
    this.keys = Object.keys(this.KEYWORD);
    this.setQuestion();
    this.bindEvent();
  },
  bindEvent: function() {
    this.btn.addEventListener('click', this.setQuestion.bind(this), false);
  },
  setQuestion: function() {
    /* 出題＋キーワード表示 */
    var question = this.getRandomQuestion();
    this.setText(question);
    this.setKeyword(question);
  },
  getRandomQuestion: function() {
    var num = Math.floor(Math.random() * this.Q.length);

    return this.Q[num];
  },
  setText: function(text) {
    this.que.innerText = text;
  },
  setKeyword: function(question) {
    var keys = this.getKeywordList(question),
      keywordTextList = this.createKeywordTextArr(keys, this.KEYWORD),
      df = document.createDocumentFragment();

    /* <span id="keyword1" class="keyword">テキスト</span> の形でセットする*/
    keywordTextList.forEach(function(item, index) {
      var el = document.createElement('span');
      el.id = "keyword" + index;
      el.classList = "keyword";
      el.innerText = item;
      df.appendChild(el);
    });

    this.keywordList.innerHTML = '';
    this.keywordList.appendChild(df);
  },
  getKeywordList: function(question) {
    // 問題文に含まれるキーワードのみを抽出した配列を作成。
    var matchArr = this.keys.map(function(item) {
      var result = question.match(item) || []
      return result[0];
    }).filter(function(item) {
      return item;
    });

    return matchArr;
  },
  createKeywordTextArr: function(arr, keyword) {
    // 問題文に含まれるキーワードの配列を元に、キーワード全体から必要な説明文だけを抽出
    return arr.map(function(item) {
      return keyword[item];
    });
  }
};

new Question();

要素の生成について

肝の部分は下記です。それ以外の部分は下記を実行する時に必要な配列（例でいうと、説明文1～3が格納されている配列）を用意するための下準備となります。

var target = document.getElementById('keyword');
var df = document.createDocumentFragment();

/* <span id="keyword1" class="keyword">テキスト</span> の形でセットする*/
['説明文1', '説明文2', '説明文3'].forEach(function(item, index) {
  var el = document.createElement('span');
  el.id = "keyword" + index;
  el.classList = "keyword";
  el.innerText = item;
  df.appendChild(el);
});

console.log(df);
/*
#document-fragment
<span id="keyword0" class="keyword">説明文1</span>
<span id="keyword1" class="keyword">説明文2</span>
<span id="keyword2" class="keyword">説明文3</span>
*/

/* 上記生成した要素をtargetである<div id="keyword"></div>内に挿入 */
target.appendChild(df);

Comments

[michiaki]

まだ勉強はじめてから時間が経っていないので、理解に時間がかかりそうです。

[yamato_hikawa]

this.queにはどんな値が入ってるのかな、と言ったことをconsole.logで確認していただければなと思います。
処理ごとに関数を分けているので、使えそうな部分だけ抜き出して試してみるのもいいです。

[michiaki]

丁寧なご回答ありがとうございます。ここまで色々なテクニックや手法を教えて頂き誠にありがとうございます。少し時間がかかりそうなので、詳しくコード書いていただいたyamato_hikawa様をベストアンサーにさせて頂きます。

Answer 2

この部分でテキストノードのnodeValueに対して代入しているので、HTMLが自動的にエスケープされて表示されてしまっています。

if (judge == 0) {
  document.getElementById('choice1').nextSibling.nodeValue = exac_a[i]; //同上
  document.getElementById('choice2').nextSibling.nodeValue = miss_a[i]; //同上
} else if (judge == 1) {
  document.getElementById('choice1').nextSibling.nodeValue = miss_a[i]; //同上
  document.getElementById('choice2').nextSibling.nodeValue = exac_a[i]; //同上
  //document.querySelector('label[for="choice1"]').innerHTML="選択肢B";
}

しかしテキストノードはinnerHTMLプロパティを持ちません。なので、テキストノードを直接操作するのではなく、操作したい部分を<span>タグで囲っておくといいと思います。

つまり、HTMLを次のようにして、

<h1>問題集1</h1>
<p id="que">ここに問題が表示されます</p>
<form id="radiobuttom">
  <div>
    <input id="choice1" type="radio" name="choice" ><span id="text1">○○○</span><br>
    <input id="choice2" type="radio" name="choice" ><span id="text2">×××</span><br>
    <input type="button" value="回答する" onclick="button_click();">
    <input type="button" value="終了" onclick="end_study(4);">
    <p id="answer"></p>
    <p id="last"></p>
  </div>
</form>

JavaScriptを次のようにするといいと思います。

if (judge == 0) {
  document.getElementById('text1').innerHTML = exac_a[i];
  document.getElementById('text2').innerHTML = miss_a[i];
} else if (judge == 1) {
  document.getElementById('text1').innerHTML = miss_a[i];
  document.getElementById('text2').innerHTML = exac_a[i];
}

Comments

[michiaki]

この指摘は過去の質問でもたくさんの方に指摘いただいております。
やっぱりその方が自然なんですね。まだまだ勉強が足りません。