<div id="testdiv"></div>在div里插入新元素,
方法一:
window.onload=function () { var testdiv=document.getElementById("testdiv"); testdiv.innerHTML="<p> This is <em> my </em> content.</p>"; }方法二:
window.onload=function () { var para=document.createElement("p");//创建元素节点 var txt1=document.createTextNode("This is");//创建文本节点 para.appendChild(txt1);//让txt1成为para的子节点 var em=document.createElement("em"); var txt2=document.createTextNode(" my "); em.appendChild(txt2); para.appendChild(em); var txt3=document.createTextNode("content."); para.appendChild(txt3); var testdiv=document.getElementById("testdiv"); testdiv.appendChild(para); }
在已有元素前插入一个新元素:
parentElement.insertBefore(newElement,targetElement);
//新元素:想插入的元素(newElement);目标元素:新元素插入到哪个元素(targetElement)之前;父元素:目标元素的父元素(parentElement)。
在现有元素之后插入一个新元素:
function insertAfter(newElement,targetElement){ var parent=targetElement.parentNode; if(parent.lastChild==targetElement){ parent.appendChild(newElement); }else { parent.insertBefore(newElement,targetElement.nextElementSibling);//将新元素查到目标元素的兄弟元素前面 } }