点击按钮追加html代码,动态给按钮增加点击事件.html

function init() {

$("div2").onclick = function(ev) {

clickHandler(ev);

function clickHandler(ev) {

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

if (target.nodeName.toLowerCase() == 'input') {

var id = target.id + "1";

createNode(target.value, id);

}

}

function createNode(value, id) {

console.log(!$(id))

if (!$(id)) {

var inp = document.createElement('input');

inp.type = "button";

inp.id = id;

inp.value = value;

inp.onclick = function() {

deleteHandler(id);

}

$('div').appendChild(inp);

} else {

alert("已存在");

}

}

function deleteHandler(id) {

var flag = confirm("确认删除？");

if (flag) $(id).remove();

}

}

function $(id) {

return document.getElementById(id);

}

}

function ready(fn){

// 目前Mozilla、Opera和webkit 525+内核支持DOMContentLoaded事件

if(document.addEventListener) {

document.addEventListener('DOMContentLoaded', function() {

document.removeEventListener('DOMContentLoaded',arguments.callee, false);

fn();

}, false);

}

// 如果IE

else if(document.attachEvent) {

// 确保当页面是在iframe中加载时，事件依旧会被安全触发

document.attachEvent('onreadystatechange', function() {

if(document.readyState == 'complete') {

document.detachEvent('onreadystatechange', arguments.callee);

fn();

}

});

// 如果是IE且页面不在iframe中时，轮询调用doScroll 方法检测DOM是否加载完毕

if(document.documentElement.doScroll && typeof window.frameElement === "undefined") {

try{

document.documentElement.doScroll('left');

}

catch(error){

return setTimeout(arguments.callee, 20);

};

fn();

}

}

}

ready(function(){

console.log("dom加载");

console.log(new Date().getTime());

init();

});

window.onload = function(){

console.log("onload");

console.log(new Date().getTime());

}

#div {

width: 600px;

height: 450px;

border: 1px solid black;

}

#div2 {

width: 600px;

height: 50px;

border: 1px solid black;

border-top: none;

padding: 10px 0;

}

input {

margin-left: 14px;

width: 80px;

height: 45px;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史