你的位置:首页 > Java教程

[Java教程]第七章 动态创建HTML内容


javascript也可以改变网页的结构和内容

  • document.write()方法

可以方便快捷地把字符串插入到文档里

document.write("<strong>hello world.</strong>");/*function insertP(text){  var str = "<p>";  str += text;  str +="</p>";  document.write(str);}insertP("hello world!");*/

  • innerHTML属性

该属性可以用来读、写某给定元素里的HTML内容。

<div id="test">  </div><script type="text/javascript">  window.onload = function(){    var testdiv = document.getElementById("test");    testdiv.innerHTML ="<p>这是一句话</p>"  }</script>

  • createElement()方法

创建一个元素节点。这个方法本身并无实际用处,需要把新创建出来的元素插入文档才能达到实际目的。

document.creatElement(node.name)

 

  • appendChild()方法

让新创建的节点成为文档某个现有节点的一个子节点。

parent.appendChild(child)

var test = document.getElementById("test");var para = document.createElement("p");test.appendChild(para);      //document.getElementById("test").appendChild(document.createElement("p"));

 

  • creatTextNode()方法

创建一个文本节点。语法:document.creatTextNode(text)

var test = document.getElementById("test");var txt = document.createTextNode("hello world");test.appendChild(text);

  • insertBefore()方法

这个方法将把一个新 元素插入到一个现有元素的前面。想调用此方法,必须知道三件事:

-想插入的新元素

-想把新元素插入到哪个现有元素的前面

-这两个元素共同的父元素

parentElement.insertBefore(newElement,targetElent)

 比如,把description插入到图片列表imagegallery的前面。

var gallery = document.getElementById("imagegallery");   gallery.parentNode.insertBefor(description,gallery);

 

  • 编写insertAfter()函数
/* 编写insertAfter函数 */function insertAfter(newElement,targetElement){  var parent = targetElement.parentNode;  if (parent.lastChild == targetElement){    parent.appendChild(newElement);  }else{    parent.insertBefor(newElement,targetElement.nextSibling);  }}