JavaScript 动态创建标记

传统创建标记方法

• document.write方法

• innerHTML属性

DOM方法

• createElement 方法

  创建元素节点方法：document.createElement(nodeName)

  //创建一个p元素
  var para = document.createElement('p');
  //此时p元素是文档碎片(document fragment)游离在文档之外

• appendChild方法

  添加到某元素的节点树

  parent.appendChild(child)

  //创建一个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通过这个对象可以自己发
送请求,同时也自己处理响应。