我们使用DOM修改文档内容时并未改变文档的物理内容。只有在用浏览器打开文档时才能看到文档呈现效果的变化。这是因为浏览器实际显示的是那颗DOM节点树。在浏览器看来，DOM节点树才是文档。
所以用动态方式实时创建标记其实并不是在创建标记，而是在改变DOM节点树。
createElement方法 例如创建一个p元素 var para = document.createElement("p"); appendChild方法 把新创建的节点插入某个文档的节点树的最简单的办法是，让它成为这个文档某个现有节点的一个子节点。 var testdiv = document.getElementById("testdiv"); var para = document.createElement("p"); testdiv.appendChild(para); createTextNode方法 现在插入的p元素节点是空白的，我们需要在p下面插入文本节点。 var txt = document.createTextNode("hello world"); para.appendChild(txt);insertBefore方法 在已有元素前插入一个新元素。 调用语法：parentElement.insertBefore(newElement,targetElement); 比如target.parentNode.instertBefore(para,target);
insetAfter方法 DOM没有提供这个方法，但我们可以自己写一个。
function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if(parent.lastChild == targetElement){ parent.appendChild(newElement); }else{ parent.insertBefore(newElement, targetElement.nextSibling); } }把< img >和下面的< p >删除。只在支持JS的浏览器上才动态创建。
function preparePlaceholder(){ if(!document.createElement)return false; if(!document.createTextNode)return false; if(!document.getElementById)return false; if(!document.getElementById("imagegallery"))return false; var placeholder = document.createElement("img"); placeholder.setAttribute("id","placeholder"); placeholder.setAttribute("src","placeholder.gif"); placeholder.setAttribute("alt","占位符"); placeholder.setAttribute("height","450"); placeholder.setAttribute("width","600"); var gallery = document.getElementById("imagegallery"); var para = document.createElement("p"); var txt = document.createTextNode("你想说点啥？"); para.appendChild(txt); para.setAttribute("id","description"); insertAfter(placeholder,gallery); insertAfter(para,placeholder); }注意addLoadEvent(insertAfter)是错误的，会出现错误。
Ajax即Asynchronous JavaScript And XML（异步JavaScript和XML）。 Ajax的主要优势就是对页面的请求以异步方式发送到服务器。
作者：于江水 链接：https://www.zhihu.com/question/31305968/answer/116023020 来源：知乎 著作权归作者所有，转载请联系作者获得授权。
简单的页面上的交互再次不满足人类的需求，比如一个资料填写表单，需要填写一个名称，这个名称还必须不能跟之前的重复。校验这个名称不能重复，就需要把数据提交上去，与服务器端数据交互的方法就是 form 提交表单。这时候需要用户填完所有的表单，点击『确定』之后提交校验。如果此时名称被占用就悲剧了。
解决这个问题的方案关键点在数据交互上面。最好的解决方案应该是输入完名字之后，就自动去吧数据发给后端，然后拿到结果并提示给用户，而不是统一提交。于是人类就想出了一套新的数据交互方案，即无刷新的异步请求，名字叫 Ajax。通过 Ajax 可以通过 JS 与后端接口进行数据交互，而不会影响当前页面。当接口返回『被占用』的时候，JS 在页面上给个提示就可以很好的实现了。
Ajax 技术提供了一种新的前后端数据交互方式，不需要刷新页面，而且不阻塞页面执行流程，异步的去请求去获取、交互数据。
一开始只是通过 Ajax 异步发一个请求，数据就是一个简单的用户名称，所以直接按照字符串发过去就好了。后来需要 Ajax 发送的数据越来越多，比如一整张表单。这时候就需要有一套规则来描述更复杂的数据，一开始估计就是用一些字符分割拼起来，再后来人类用 xml 来描述，发现解析还是挺麻烦的，于是就基于 JavaScript 的数据类型创造了 JSON 这种数据描述格式，很简单的就可以描述很复杂的数据。同时独立于语言，这样就可以在多种语言内使用。
JSON 用来描述前后端数据交互的内容格式，有了 JSON 这样的一套统一的描述规则，前后端解析数据的成本变低，使用非常简单。JSON 属于 JavaScript 的一个子集。
未完待续…..
