javascript动态创建html标记的方法实例总结
- 伊谢尔伦原创
- 2017-07-27 10:56:521546浏览
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中文网其他相关文章！