appendChild
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> <style type="text/css"> </style> </head> <body> <ul id="list"> </ul> <script type="text/javascript"> var oUI = document.getElementById('list'); var oFrag = document.createDocumentFragment(); for(var i = 0; i < 10000; i++){ var oLi = document.createElement('li'); oLi.innerHTML = i + '、这是第' + i + '个项目'; oLi.className = 'list-item'; oFrag.appendChild(oLi); } oUI.appendChild(oFrag); </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> </head> <body> <div>123</div> <p>234</p> <script type="text/javascript"> var comment = document.createComment('我是注释君'); document.body.appendChild(comment); var div = document.getElementsByTagName('div')[0]; var p = document.createElement('p'); p.innerHTML = 'JavaScript'; var text = document.createTextNode('ECMAScript'); div.appendChild(p); div.appendChild(text); div.appendChild(comment); var a = document.getElementsByTagName('a')[0]; var div = document.createElement('div'); div.innerHTML = '<p>我是段落标签</p>'; document.body.appendChild(div); var newA = document.createElement('a'); div.appendChild(newA); document.body.appendChild(div); div.appendChild(a);//剪切节点 </script> </body> </html>childNodes
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> </head> <body> <div>123</div> <script type="text/javascript"> Text.prototype.aaa = 'aaa'; CharacterData.prototype.bbb = 'bbb'; var div = document.getElementsByTagName('div')[0]; var text = div.childNodes[0]; console.log(text.bbb); </script> </body> </html>replaceChild
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> <style type="text/css"> .title{ color: orange; } .area{ color: #666; } </style> </head> <body> <ul id="list"></ul> <div> <h1></h1> </div> <script type="text/javascript"> //parent.replaceChild(new,origin) var div = document.getElementsByTagName('div')[0]; var h1 = document.getElementsByTagName('h1')[0]; var h2 = document.createElement('h2'); div.replaceChild(h2,h1); </script> </body> </html>