动态创建HTML内容

本章内容：   ·动态创建html的‘老’技巧：document.write(),innnerHTML   ·DOM方法，createElement(),createTextNode(),     appendChild(),insertBefore()等方法。

1，document.write方法   简单而言，在.html文件中写入以下的内容，这是虽然.html文件中没有任何的文字内容，但是显示出来的网页中会出现“This is inserted”。   <script type="text/javascript">     document.write("<p>This is inserted"</p>);   </script>   但是这样做则违背了分离js的原则。   创建example.js,然后再引用它。   function insertParagraph(text){     var str="</p>"     str+=text+"</p>"     document.write(str);   }   然而想上面这样将html和js混杂在一起是一种很不好的做法。另外在html中编写js脚本很容易导致错误，<script>后面的<p>很容易被误认为是<p>标签而在<script>中打开<p>标签是非法的。   SUMMARY: 应该尽力少使用document.write方法。 2，innerHTML属性   <div id="testDiv">     <p>This is <em>my</em> content.</p>   </div>   使用js检查div元素的innerHTML属性；   #@test1.html <script src="test1.js"/> <div id="testDiv">     <p>This is <em>my</em> content.</p> </div> #@test1.js window.οnlοad=function(){     var testdiv=document.getElementById("testDiv");     alert(testdiv.innerHTML); }   由此可以使用innerHTML更改文档的结构：   #test1.html <script src="test1.js"/> <div id="testDiv">    </div> #test1.js window.οnlοad=function(){     var testdiv=document.getElementById("testDiv");     testdiv.innerHTML="<p>I inserted <em>this</em> text"; }   innerHTML的优缺点：   1，适合大刀阔斧的改变文档的内容。但是不提供DOM方法的精确性。   2，innerHTMl只适用于html文档，不适合XHTML文档，及MIME类型使用application/xhtml+xml的xhtml文档。   3，innerhtml是一项专利技术。编写js时应该避免任何形式的专利这样才不至于陷入到浏览器之争中。   4，任何时候标准DOM都是可以替代INNERHTML的。而且提供更高的精确性和更多的功能。

7.3，DOM提供的方法   createElement方法，nodeName,nodeType属性   用于创建元素节点。   window.οnlοad=function(){     var para=document.createElement("p");     var info="nodename: ";     info+=para.nodeName;     info+=" nodetype: ";     info+=para.nodeType;     alert(info);   }   略作处理浏览器窗口将弹出对话框显示有关新创建节点的信息。不过现在P元素节点只是一个孤儿；     appendChild方法   将游荡的元素p添加到id为testdiv的元素上   var parent=document.getElementById("testdiv");   parent.appendChild(para);   这时html文档中还不会有什么显示，因为P元素并没有节点内容。     createTextNode方法   var txt=document.createTextNode("hello world");   para.appendChild(txt);   这时文档会显示“hello world”字符串。 重回javascript美术馆     XHTML文件中的placeholder和description元素完全是由于showPic脚本而存在的，那么用DOM方法来创建它们才能实现结构和行为的彻底分离。   var placeholder = document.createElement("img");   placeholder.setAttribute(     "id","placeholder");   placeholder.setAttribute(     "src","images/placeholder.gif");   placeholder.setAttribute("alt","my image gallery");   var description = document.createElement("p");   description.setAttribute("id","description");   var desctext = document.createTextNode(     "Choose an image");   description.appendChild(desctext);   var gallery = document.getElementById(     "imagegallery");   document.getElementsByTagName(    "body")[0].appendChild(placeholder);   document.getElementsByTagName(    "body")[0].appendChild(description);   但是以上的代码还存在一个问题就是，图片清单对应元素为body元素的最后一个元素。   insertBefore方法,parentNode属性，nextSibling属性   可以用以下的方法将placeholder元素插入到imagegallery元素的前面：   var gallery=document.getElementById("imagegallery");   gallery.parentNode.insertBefore(placeholder,gallery);     编写insertAfter函数   DOM并未提供一个insertAfter函数。尽管它应该会非常有用。   function insertAfter(newElement,targetElemnt){     var parent=targetElement.parentNode;     if(targetElement==parent.lastChild)       parent.appendChild(newElement);     else parent.insertBefore(newElement,       targetElement.nextSibling);   }   使用insertAfter方法：   var placeholder = document.createElement("img");   placeholder.setAttribute("id","placeholder");   placeholder.setAttribute("src","images/placeholder.gif");   placeholder.setAttribute("alt","my image gallery");   var description = document.createElement("p");   description.setAttribute("id","description");   var desctext = document.createTextNode("Choose an image");   description.appendChild(desctext);   var gallery = document.getElementById("imagegallery");   insertAfter(placeholder,gallery);   insertAfter(description,placeholder);