生JavaScriptで、ランダムに配列を取得し、HTMLに描画したい

Question

###実現したいこと
#resultへ、var arryをランダムに取得して、『HTMLとして』描画したいです。

###発生している問題
『HTMLとして』でなく、『テキストとして』出力されてしまいます。

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

<div id="result">
</div>

<script>
  var arry = [
    {
      "num": "001",
      "list": "リストA",
      "content": "コンテンツA"
    },
    {
      "num": "002",
      "list": "リストB",
      "content": "コンテンツB"
    },
    {
      "num": "003",
      "list": "リストC",
      "content": "コンテンツC"
    }
  ];

  var numbers = [];
  for (var i = 0; i < arry.length; i++ ) {
    numbers.push(Math.random());
  }
  var randArry = arry.sort(function(a, b) {
    return numbers[arry.indexOf(a)] - numbers[arry.indexOf(b)];
  });
  for(var i in randArry){
    var h = '<dt>'
    + randArry[i].num
    + '：'
    + randArry[i].list
    + '</dt>'
    + '<dd>'
    + randArry[i].content
    + '</dd>';
    console.log(h);
    //$("dl#wrap").append(h);
  }

  // id属性で要素を取得
  var textbox_element = document.getElementById('result');

  // 新しいHTML要素を作成
  var new_element = document.createElement('p');
  new_element.textContent = h;

  // 指定した要素の中の末尾に挿入
  textbox_element.appendChild(new_element);
  
</script>

###試したこと１
appendChildでなくappendを使いましたが変わりありませんでした。

textbox_element.append(new_element);

###試したこと２
最期の部分に直にhを入れましたが、

textbox_element.appendChild(h);

次のエラーでした

(index):81 Uncaught TypeError:
Failed to execute 'appendChild' on 'Node':
parameter 1 is not of type 'Node'.

エラーを見るに、「appendChild使うときは、Nodeじゃないとダメだよ」とのことですが、それがなんなのか、意味がよくわかりません。

試したこと３

エラーを参考に、次の変換の関数htmlToNodeを見つけた（参考サイト）のですが、結局同じエラーになってしまいます…

  var htmlToNode = function(htmlStr) {
      if (!htmlStr || typeof htmlStr !== 'string') return;

      var tmpElmt = document.createElement('div'),
          i = 0, len = 0, nodes = [];

      // 高速処理するが対応ブラウザを考えinnerHTMLを使用
      tmpElmt.innerHTML = htmlStr; // tmpElmt.insertAdjacentHTML('beforeend', htmlStr);

      return tmpElmt.childNodes;
  };

  // 指定した要素の中の末尾に挿入
  textbox_element.appendChild(htmlToNode(new_element));

Answer 1

textContent の代わりに innerHTML を試してみて下さい。

//new_element.textContent = h;
new_element.innerHTML = h;

＜参考＞
■ JavaScript textContentとinnerHTMLの違いのサンプル
https://itsakura.com/js-textcontent-innerhtml

Comments

[gamugamu]

参考リンクまでありがとうございます。助かりました。

Answer 2

const a= [
  {
    "num": "001",
    "list": "リストA",
    "content": "コンテンツA"
    },
  {
    "num": "002",
    "list": "リストB",
    "content": "コンテンツB"
    },
  {
    "num": "003",
    "list": "リストC",
    "content": "コンテンツC"
    }
  ];
const b=a.map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
document.querySelector('#result').appendChild(document.createElement('dl'));
b.forEach(x=>{
  const dt=Object.assign(document.createElement('dt'),{textContent:`${x.num}：${x.list}`});
  const dd=Object.assign(document.createElement('dd'),{textContent:x.content});
  const div=[dt,dd].reduce((x,y)=>(x.appendChild(y),x),document.createElement('div'));
  document.querySelector('#result dl').appendChild(div);
});