在文档中创建和插入新元素

来源:互联网 发布:mod达人邢凯淘宝店 编辑:程序博客网 时间:2024/05/22 15:28

<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);//将新元素查到目标元素的兄弟元素前面    }}

0 0
原创粉丝点击