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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。