【DOM编程艺术】动态创建标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态创建标记</title>
</head>

<body>
<script>
window.onload=function(){
    var testdiv=document.getElementById('testdiv');
    var para=document.createElement('p');
    var txt1=document.createTextNode('This is ');
    para.appendChild(txt1);
    var emphasis=document.createElement('em');
    var txt2=document.createTextNode('my ');
    emphasis.appendChild(txt2);
    para.appendChild(emphasis);
    var txt3=document.createTextNode('content.');
    para.appendChild(txt3);
    testdiv.appendChild(para);   //Javascript代码执行后，testdiv里会插入一元素  <div id='testdiv'><p>This is <em>my</em> content.</p></div>
}
</script>
<div id='testdiv'></div>
</body>
</html>

另一种方案就是先创建所有的节点，然后再把它们连接在一起。