createtextnode无法换行

Question

上课时老师给出一道题，使用JavaScrip属性在页面输出一首诗，我就写出了这些代码，写完之后发现无法换行，后面的p里面的内容和h1一样了，希望得到解答

 

Answer 1

// 把script代碼换成我的 不换行的问题在于HTML里面没有标签为p2-p4的
// 内容一样是因为你每次追加节点文本的时候都是用的第一次创建h1的文本 导致后面标签都没有文本值并且文本都追加在了h1身上
<script>
    // 方式1
    var element = document.createElement("h1");
    element.className = "message";
    var textNode =  document.createTextNode("春晓");
    element.appendChild(textNode);
    document.body.appendChild(element);

    var element1 = document.createElement("p");
    element1.className = "message";
    var textNode1 =  document.createTextNode("春眠不觉晓");
    element1.appendChild(textNode1);
    document.body.appendChild(element1);

    var element2 = document.createElement("p");
    element2.className = "message";
    var textNode2 =  document.createTextNode("处处闻啼鸟");
    element2.appendChild(textNode2);
    document.body.appendChild(element2);

    var element3 = document.createElement("p");
    element3.className = "message";
    var textNode3 =  document.createTextNode("夜来风雨声");
    element3.appendChild(textNode3);
    document.body.appendChild(element3);

    var element4 = document.createElement("p");
    element4.className = "message";
    var textNode4 =  document.createTextNode("花落知多少");
    element4.appendChild(textNode4);
    document.body.appendChild(element4);
    // 方式2
    // create('h1', "春晓");
    // create('p', "春眠不觉晓");
    // create('p', "处处闻啼鸟");
    // create('p', "夜来风雨声");
    // create('p', "花落知多少");
    // function create(node, text) {
      // var element = document.createElement(node);
      // element.className = "message";
      // var textNode =  document.createTextNode(text);
      // element.appendChild(textNode);
      // document.body.appendChild(element);
    // }
  </script>