我是一個業余web愛好者,看了一點點Javascript,想實踐一下,卻遇到了困難:用createElement、createTextNode、appendChild等方法欲創建一個與滑鼠點擊相關的網頁時,點擊沒有反應。這里將代碼精簡后放在下面,希望遇到熱心的論壇老哥能指正錯誤,謝謝!
以下是HTML部分。內容是一個空鏈接(#)-------一張縮略圖 li標簽的id是thumbnail
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題檔案</title>
</head>
<body>
<ul>
<li id="thumnail"><a href="https://bbs.csdn.net/topics/ " title="犀牛">
< img src="https://bbs.csdn.net/topics/media/thumbnail.jpeg" alt="犀牛"/>
</a ></li></ul>
<script type="text/javascript" src="https://bbs.csdn.net/topics/ques.js"></script>
</body>
</html>
以下是JS部分:
// JavaScript Document
//在網頁里創建一個div,并創建其中的內容:
function create1(){
var cre_div=document.createElement("div");
var cre_img=document.createElement("img");
var cre_p=document.createElement("p");
var cre_tex=document.createTextNode("如果代碼成功能夠看到這段文字")
cre_div.setAttribute("id","the1");
cre_img.setAttribute("id","pic1");
cre_img.setAttribute("src","media/picture.jpg");
cre_img.setAttribute("alt","the1");
cre_p.setAttribute("class","p1");
cre_div.appendChild(cre_img);
cre_div.appendChild(cre_p);
cre_p.appendChild(cre_tex);
window.ducument.getElementsByTagName("body")[0].appendChild(cre_div); //這里加window.是因為不加的時候報錯說ducument沒有被定義,真是莫名其妙,我就加了一個window.在前面。
}
//將上面的函式與滑鼠點擊行為系結
function implement(){
var xiniu=document.getElementById("thumbnail")
xiniu.onclick=function(){create1();
}
}
//頁面加載結束時的執行函式:(來源于《Javascript dom編程藝術第二版》)
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
addLoadEvent(implement); //要執行的函式加在這-----------這里表示頁面加載完畢后,implement函式就可以運行,只要滑鼠點擊即可。
打開瀏覽器,可以看到一只犀牛的縮略圖,本來設想點擊這張縮略圖,則會加載一段圖片+文字的段落,但是沒有反應。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/168413.html
標籤:JavaScript
