JavaScript 动态创建标记
传统创建标记方法
document.write方法
innerHTML属性
DOM方法
createElement 方法
创建元素节点方法:document.createElement(nodeName)
//创建一个p元素 var para = document.createElement('p'); //此时p元素是文档碎片(document fragment)游离在文档之外
appendChild方法
添加到某元素的节点树
//创建一个p元素 var para = document.createElement('p'); var testdiv = document.getELementById("testdiv"); //添加p元素到testdiv,成为testdiv的一个子元素节点 testdiv.appendChild(para);
createTextNode方法
创建一个文本节点
document.createTextNode(“txt”)
//创建一个文本节点 var text = document.createTextNode("hello world"); //创建一个p元素 var para = document.createElement('p'); //添加文本节点到元素节点 para.appendChild(text);
Example:创建复杂的示例
//创建 <p> this is <em>my</em> content. </p> var para = document.createElement("p"); var txt1 = document.createTextNode("this is"); para.appendChild(txt1) var em = document.createElement('em'); var txt2 = document.createTextNode('my'); em.appendChild(txt2) var txt3 = document.createTextNode('content.'); para.appendChild(em) para.appendChild(txt3)
获取body元素
//方法1 document.getElementsByTagName('body')[0] //方法2 document.body
在已有元素前插入一个新元素
insertBefore()方法
新元素newElement,目标元素targetElement,父元素parentElement(目标元素的父元素)
parenetElement.insertBefore(newElement,targetElement) ==targetElement.parentNode.indsertBefore(newElement,targetElement) //在父元素内在目标元素前插入 // <div id='demoParent'> <span id='demoChild'> </span> </div> var obj = document.createElement('p'); var demoChild = document.getELmentById("demoChild"); var demoParent = document.getELementById("demoParent"); demoParent.insertBefore(obj,demoChild) == demoChild.parentNode.insertBefore(obj,demoChild)
在现有的元素后插入一个新元素(DOM未提供)
自制函数insertBefore()
function insertBefore(new,target){ var parent = target.parentNode; if(parent.lastChild == target){ parent.appendChild(new) }else{ //目标元素的下一个兄弟元素 target.nextSibling parent.appendChild(new,target.nextSibling); } }
*Ajax
异步加载页面内容,无需刷新页面
XMLHttpRequest 对象
Ajax技术的核心就是XMLHttpRequest对象。这个对象充当着浏览器中的脚本(客户端)与服
务器之间的中间人的角色。以往的请求都由浏览器发出,而 JavaScript通过这个对象可以自己发
送请求,同时也自己处理响应。