JavaScript学习笔记4.---动态创建HTML内容

1.innerHTML方法
    

<div id="testdiv">
</div>
 
//下面这段JavaScript代码就可以把一段HTML内容插入到这个div标签中
window.onload=function()
{
  var testdiv=document.getElementById("testdiv");
  testdiv.innerHTML="<p>I inserted <em>This</em> content.</P>
}

2.appendChild()方法 createTextNode()方法
    语法"parent.appendChild(child)
    eg:
        var testdiv = document.getElementById("testdiv");
        var para = document.createElement("p");
        testdiv.appendChild(para);
    语法:document.createTextNode(text)
    eg:
        var txt = document.createTextNode("Held World");
        para.appendChiild(txt);
3.一个插入HTML内容的例子;
    <P>This is <em> My </em> Content.</P>
    这些HTML内容对应着一个P元素节点,他本身又包含着以下子节点:
    *一个文本节点,其内容是"This is"
    *一个元素节点,这个元素节点的名字是"em";这个元素节点本身还包含着:
        +一个文本节点,其内容是"my"
    *一个文本节点,起内容是"content."
下面是代码

//JavaScript
window.onload=functon()
{
//创建一个P元素节点并把它附值给变量para.
var para = document.createElement("p");
//创建一个文本节点并把他附值给变量txt1
var txt1 = document.createTextNode("This is ");
//把txt1追加到para上
para.appendChild(txt1);
//创建一个em元素接并且把他附值给变量emphasis
var emphasis = document.createElement("em");
//创建一个文本节点并且把他附值给变量txt2.
var txt2 = document.createTextNode("my");
//把txt2追加到emphasis
emphasis.appendChild(txt2);
//把emphasis追加到para上
para.appendChild(emphasis);
//创建一个文本节点并把他附值给txt3
var txt3 = document.createTextNod("content");
//把txt3追加到para上
para.appendChild("txt3");
//把para追加到test.html文档中的testdiv元素上
var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);
}

4.一个有用的函数 insertAfter()
DOM本身没有提供一个insertAfter()方法.但是完全可以用现有DOM方法和属性把一个节点插入到另一个节点后面.下面是书的作者编的insertAfter()函数;
    

function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}