<!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()是不需要等加載的就可以直接執行。