动态html函数的写法,详解js的事件处理函数和动态创建html标记方法

1 HTML的事件属性

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

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

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

c. keybord事件

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

e. Media事件，由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素，但常见于媒介元素中，比如 、、

、以及 )。

2 事件处理函数

文档的结构与文档的行为混杂在一起，例如：

文档的结构与文档的行为分开，例如：

element.onclick = function() { showPic(whichpic); return false; }

3 共享onload事件

页面加载之后立即执行一段 JavaScript：页面加载后执行多个脚本呢？办法是:

但是这个办法没有弹性，如果需要加载的脚本不断变化,那么代码也要跟着变化，更好的办法是:

4 动态创建html标记

a. 两个传统的方法

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

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

document.write

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

window.onload = function() {

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

testdiv.innerHTML = "

This is inserted by innerHTML";

}

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方法照样可以实现:

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程之家！

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

小编个人微信号 jb51ccc

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！