js用document.getElementById時要注意!


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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM