首页 > 文章 > web前端 > javascript动态创建html标记的方法实例总结

javascript动态创建html标记的方法实例总结

伊谢尔伦原创: 2017-07-27 10:56:521497浏览

HTML的事件属性

全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力，比如当用户点击元素时启动 JavaScript。

a. Window 事件属性，针对 window 对象触发的事件（应用到 6c04bd5ca3fcae76e30b72ad730ca86d 标签），常用的为onload。

b. Form事件，由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：常用的为onblur、onfocus、onselect、onsubmit。

c. keybord事件

d.Mouse事件，由鼠标或类似用户动作触发的事件：常用的为onclick、onmouseover、onmouseout。

e. Media事件，由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 b97864c2e0ef2353a16c4d64c7734e92、d8e2720730be5ddc9c2a3782839e8eb6、a1f02c36ba31691bcfe87b2722de723b、273238ce9338fbb04bee6997e5552b95 以及 39000f942b2545a5315c57fa3276f220）。

动态创建html标记

a. 两个传统的方法

document.write方法和innerHTML属性，两者都不是标准化的DOM(W3C标准)所支持的方法和属性，它们都是html的专有属性。

document.write方法可以很方便的插入元素标签，尤其是字符串。但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则相背。

<!DOCTYPE html>
 <html>
 <head>
 <meta chaset="utf-8" />
 <title>document.write</title>
 <body>
  <script>
  <!--可以很方便的插入元素标签,尤其是字符串.但是它与网页设计应将行为(脚本)和结构(html标签)分离的原则-->
  document.write("<p>This is inserted by document.write</p>");
  </script>
 </body>
 </head>
 </html>

innerHTML适合将一大段HTML内容插入网页,如:

<p id="testp">
 </p>
 window.onload = function() {
 var testp = document.getElementById("testp");
 testp.innerHTML = "<p>This is inserted by <em>innerHTML</em></p><en>";
 }

b. 更加精细化的dom方法-获取dom节点树和改变dom节点树

    检索节点（元素）:document.getElementById和element.getElementsByTagName

    创建节点（元素）:document.createElement,document.createTextNode

    追加节点（元素）:element.appendChild

插入(将一个节点插入到另一个节点之前):parentEelement.insertBefore(newElement, targetElement)

很有用的属性：element.parentNode（获取父节点）、element.nextSibling（获取兄弟节点）

上面用innerHTML属性插入HTML的效果用dom方法照样可以实现:

 window.onload = function() {
  var testp = document.getElementById("testp");
  var para = document.createElement("p");
  testp.appendChild(para);
  var context1 = doument.createTextNode("This is inserted by ");
  para.appendChild(context1);
  var emphasis = document.createElement("em");
  para.appendChild(emphasis);
  var context2 = document.createTextNode("method of domcore");
  emphasis.appendChild(context2);
 }

利用上面的dom方法写一个将一个节点插入到另一个节点之后的函数：

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

以上是javascript动态创建html标记的方法实例总结的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：javascript原型继承基本模式用法及改进方式实例详解下一篇：JavaScript中对象、公有成员、私有成员等基础概念实例汇总

查看更多