今天看javascript DOM编程艺术（第2版）发现这样一个例子：
效果图：
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #placeholder{ width: 300px; height: 200px; } img{ display: block; } </style> </head> <body> <h3>图片展示</h3> <ul> <li><a href="images/logo.png" title="天灵图标">天灵图标</a></li> <li><a href="images/panda.png" title="熊猫图标" >熊猫图标</a></li> <li><a href="images/gameLogo.png" title="游戏图标">游戏图标</a></li> </ul> <img id="placeholder" src="images/placeholder.jpg" alt="mypic"> <p id="description">选择一张图片</p> </body> <script> function showPic(whichPic){ var source=whichPic.getAttribute('href'); var placeholder=document.getElementById('placeholder'); placeholder.setAttribute("src",source); var text =whichPic.getAttribute('title'); var description=document.getElementById('description'); // description.childNodes[0].nodeValue= text; description.firstChild.nodeValue= text; // description.innerHTML=text; } var dianji=document.getElementsByTagName('a'); for(var i=0;i<dianji.length;i++){ dianji[i].onclick=function(){ showPic(this); return false; } } </script> </html>
问题：
发现不加内容时
Uncaught TypeError: Cannot set property 'nodeValue' of null(…)
为避免这种情况，建议使用innerHTML来设置内容或是使用html5中的data-src.