传统方法

document.write()

即使把document.write语句挪到外部函数，也还是需要在标记的body部分使用script标签才能调用那个函数。

function insertParagraph(text){var str = "
";str += text;str += "
";document.write(str);
}

我们把这个函数保存到外部JS文件中，为了调用这个函数，必须在标记里插入script标签：

应该避免使用document.write方法

innerHTML 属性

这个属性可以用来读、写某给定的元素里的HTML内容，一旦使用它，目标篇元素里的内容将全会被替换掉。

//该方法将会把一段HTMl内容插入对应的标签
window.onload = function(){var testdiv = document.getElementById("testdiv");testdiv.innerHTML = "
I inserted  this  content.
"
}

DOM方法

createElement方法

var para = document.vreateElement("p");

上面这条语句将创建一个新的p元素，并赋值给一个变量。此时它已经是一个元素节点，但没有连接到DOM树上。

appendChild方法

把新创建的节点插入到某个文档的节点树的最好的办法就是，让他成为这个文档某一个现有节点的子节点。

var testdiv = document.getElementById("testdiv");
testdiv.appendChild(para);

createTextNode方法

createElement方法只能创建元素节点，想把文本放入p元素，要创建一个文本节点，用方法createTextNode。

vat text = document.createTextNode(text);

和createElement方法一样，此时这个节点也是javascript世界里的一个孤儿，没有被插入任何一个文档。我们可以使用appendChild方法，把这个文本节点插入为某个现有元素的子节点上。
这样就达到动态创建标记的目的了。

insertBefore()

这个方发将把一个新元素插入到一个现有的元素前面。使用方法：1.新元素：想插入的元素。2.目标元素：插入到那个元素之前。3.父元素：目标元素的父元素。

//模板
parentElement.insertBefore(newElement,targetElement)

在现有元素后插入一个新元素

DOM本身没有实现，要自己编写。

function insertAfter(newElement,targetElement){var parent = targetElement.parentNode;if(parent.lastChild == targetElement){parent.appendChild(newElement);}else{parnet.insertBefore(newElement,targetElement.nextSibling);}
}

Ajax

对页面的请求以异步方式发送到服务器。服务器不会用整个页面来响应请求，他会在后台处理请求，于此同时用户还能继续浏览页面并于页面交互。

XMLHttpRequest对象——Ajax的核心对象

这个对象充当着浏览器中的脚本与服务器之间的中间人的角色。以往的请求都是浏览器发出，而JavaScript通过这个对象可以自己发送请求，同时自己处理相应。