纯Javascript设计页面

《尝试制作一个简单的页面》的案例是使用HTML元素完成一个页面效果，本节课使用Javascript操作浏览器支持的方法和属性创建元素添加样式。具体点说就是创建h1、p、img元素，然后分别添加样式。

7    <body>
8    <script>
9    //    body里面插入div元素
10       let div = document.createElement("div");
11       div.style.width = "260px";
12       div.style.margin = "100px auto";
13       div.style.background = "#00B7FF";
14       div.style.padding = "20px";
15       document.body.appendChild(div);
16   //    div元素插入h1元素
17       let h1 = document.createElement("h1");
18       h1.style.width = "140px";
19       h1.style.margin = "0px auto";
20       h1.innerHTML = "过零丁洋";
21       div.appendChild(h1);
22   //   div元素插入p元素
23      let p = document.createElement("p");
24      p.innerHTML = "辛苦遭逢起一经，干戈寥落四周星。" +
25          "<br>山河破碎风飘絮，身世浮沉雨打萍。" +
26          "<br>惶恐滩头说惶恐，零丁洋里叹零丁。" +
27          "<br>人生自古谁无死，留取丹心照汗青。";
28      p.style.fontSize = "16px";
29      div.appendChild(p);
30   //   div元素插入img元素
31      let img = document.createElement("img");
32      img.src = "http://www.yanhuangxueyuan.com/HTML5/icon/wen.jpg";
33      img.alt = "文天祥";
34      img.style.width = "255px";
35      img.style.height = "400px";
36      div.appendChild(img);
37   </script>
38   </body>

代码比较简单，大家自行阅读即可，只说一下第24行到第27行代码，编程的时候，如果字符串太长写成一行不方便显示和阅读，直接换行的时候，上下行字符串之间有空格，会产生多余的空格字符，可以利用Javascript的字符串连接符“+”，消除空格的影响，一般使用WebStorm软件比较方便，鼠标在一行字符串的任意位置直接单击，然后单击键盘回车键，软件会自动添加引号和加号，无需手动处理。

cssText()

上面的代码使用点符号一个一个添加style样式属性比较麻烦，可以借助style对象的方法cssText()批量添加，类似CSS中书写格式。

9    //    body里面插入div元素
10    let div = document.createElement("div");
11    div.style.cssText = "width: 260px;margin: 100px auto;background:#00B7FF;padding: 20px;";
12    document.body.appendChild(div);
13    //    div元素插入h1元素
14    let h1 = document.createElement("h1");
15    h1.style.cssText = "width: 140px;margin: 0px auto";
16    h1.innerHTML = "过零丁洋";
17    div.appendChild(h1);

div和h1两个元素的样式都实现了批量添加，注意这里针对的是style对象的属性。

SEO

使用上面代码创建界面的缺点是不利于SEO，目前百度、360、搜狗的搜索引擎针对的都是HTML标签，而不是Javascript代码。

angular.js

只要你了解document对象选择元素的方法，就知道JQuery大致的特点，一般就是先用HTML完成网页内容，再利用JQuery库选择、操作元素。而使用angular.js的时候往往是通过Javascript代码创建元素再插入到body元素里面，常常用于Web应用。