<!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>
另一种方案就是先创建所有的节点，然后再把它们连接在一起。