JavaScript插入节点

1.

 document.write("<p>This is inserted.</p>");

该方法必须加在HTML文档内,违背了结构行为分离原则,不推荐.

2.

window.onload = function() {
  var testdiv = document.getElementById("testdiv");
  testdiv.innerHTML="<p>I inserted <em>this</em> content.</p>";
}

一旦使用innerHTM,某个节点内的内容全部被替换为" "内的内容. innerHTML实现了结构行为分离,但它是一项专利技术,也就是说会有浏览器兼容性.不推荐使用

3.通用性方法

window.onload = function() {
  var para = document.createElement("p");
  var txt1 = document.createTextNode("I inserted ");
  var emphasis = document.createElement("em");
  var txt2 = document.createTextNode("this");
  var txt3 = document.createTextNode(" content.");
  para.appendChild(txt1);
  emphasis.appendChild(txt2);
  para.appendChild(emphasis);
  para.appendChild(txt3);
  var testdiv = document.getElementById("testdiv");
  testdiv.appendChild(para);
}

关键字: createElement  createTextNode appendChild