在有些情况下，我们需要给已经在浏览器中加载的页面随时加载Javas代码，就可以利用createElement动态新建<script>元素。

 

  •  
  •  
  •  
var src = document.createElement("script");src.setAttribute("src","script1.js");document.head.appendChild(src);

 

注意，如果使用此种方式动态加载JavaScript源文件，在文件加载完成之前，页面不能使用其中包含的代码，使用前最好先检测。

 

动态创建菜单：

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script>        window.onload = makeMenu;        function makeMenu() {            var h2All = document.getElementsByTagName("h2");            var menu = document.createElement("div");            var menuUL = document.createElement("ul");            menu.appendChild(menuUL);
            for (let i = 0; i < h2All.length; i++)            {                var menuLI = document.createElement("li");                menuUL.appendChild(menuLI);
                var liA = document.createElement("a");                liA = menuLI.appendChild(liA);                liA.setAttribute("href","#item"+i);
                var itemText = h2All[i].childNodes[0].nodeValue;                var menuText = document.createTextNode(itemText);                liA.appendChild(menuText);
                var anc = document.createElement("a");                document.body.insertBefore(anc,h2All[i]);            }
            document.body.insertBefore(menu,document.body.firstChild);        }</script></head><body>    <h1>时政新闻</h1>    <h2>新闻标题1</h2>    <p>新闻内容1</p>    <h2>新闻标题2</h2>    <p>新闻内容2</p>    <h2>新闻标题3</h2>    <p>新闻内容3</p>    <h2>新闻标题4</h2>    <p>新闻内容4</p></body></html>

 

先获取页面中全部的h2元素，然后创建一个div，名字是menu；

在创建一个无序列表，将无序列表追加至menu中；

循环h2集合，先建立li元素，将li元素追加至无序列表中；

再创建链接a，将链接追加至li元素中，并设置属性href；

再创建文本节点，把文本节点追加至li元素中；

再建立一个空锚点链接，把他们依次插在h2元素之前，作为锚点；

最后将menu插入在body第一个元素之前。

 

 

 

 

 

 

动态加载文件-JavaScript入门基础（019）_html