<!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> // jQuery(document).ready(function($) { // $('li:first').append('<p>新的節點</p>'); // }); window.onload=function(){ var rightdiv = document.getElementById('nav'); //這里用id獲取不到的原因是,要先執行到下面的li時,才能獲取到,而document.createElement是不需要網頁的執行就可以直接繼續下去的,從而不會包appendChild屬性值為空的情況 var rightaaron = document.createElement("p"); rightaaron.innerHTML = "動態創建DIV元素節點"; //2個div合並成包含關系 rightdiv.appendChild(rightaaron) //繪制到頁面body document.body.appendChild(rightdiv) }; </script> <ul > <li id='nav'> <p href="">舊的節點</p> </li> <li> <p href="">舊的節點</p> </li> </ul> </body> </html>
因為var rightdiv = document.getElementById('nav');這句話必須要等到
<ul > <li id='nav'> <p href="">舊的節點</p> </li> <li> <p href="">舊的節點</p> </li> </ul>這段代碼執行到時才能夠獲取到id,所以需要加個winodw.onload來獲取
網頁中的javaScript腳本代碼往往需要在文檔加載完成后才能夠去執行,否則可能導致無法獲取對象的情況
直接用document.createElement()是不需要等加載的就可以直接執行。