サラリーマン夜の勉強 JavaScript DOM操作

JavaScript DOM操作

演習：DOM操作で悩んだ所

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>演習：DOM</title>
  </head>
  <body>
    <ul id="lists">
    </ul>
    <input type="text" id="newList">
    <input type="button" value="追加" onclick="append()">
    <script src="js/exercise.js"></script>
  </body>
</html>

function append() {
  // inputから入力内容を取得
  var newList = document.getElementById("newList").value;
  // li要素を作成
  var li = document.createElement("li");
  // liタグの要素に、テキストノード text を追加
  li.appendChild(text);
  // idgalistsのulタグに、liを追加
  lists.appendChild(li);

コンソールに出力して変数の中身をみても問題なさそうだったので、最初はこれでなぜできないのかと悩んでしまいました。
結構な時間調べましたがわからず解答をみたところ、問題点はnewListがテキストノードになっていないことが原因でした。
ノードをDOMツリーに追加するappendChildは考えれば当然ですが、ノード以外のものを追加しようとするとエラーになりますね。