我才12岁 ?

有时候我们需要在页面中动态的创建一些节点，比如 <a> 标签，然后对其添加一下触发的事件，比如下边这个很简单的例子：

function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function() {
  oldonload();
  func();
  }
 }
}
function create() {
 var bodys = document.getElementsByTagName("body");
 var link = document.createElement("a");
 link.href = "#";
 var text = document.createTextNode("创建一个节点");
 link.appendChild(text);
 link.onclick = function() {
  alert("哈哈");
  return false;
 }
 bodys[0].appendChild(link);
}
addLoadEvent(create);

这个例子很简单，就是创建一个 <a>，然后让用户在点击的时候触发一个事件。

昨天在做 faq 页面的时候，觉得应该把文章里的 pre 标签后边添加一个复制按钮，这样子方便大家复制代码，然后就这么写，但是很显然，情景不一样了，实现起来也没有这么简单，因此想到了下边这个方法：

function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function() {
  oldonload();
  func();
  }
 }
}


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

function copycode(targetCode) {
 for(var i=0; i<targetCode.length; i++) {
  var link = document.createElement("a");
  link.href = "#";
  link.className = "new_link"
  var text = document.createTextNode("复制");
  link.appendChild(text);
  insertAfter(link,targetCode[i]);
 }
 var new_links = document.getElementsByTagName("a");
 for(var j=0; j<new_links.length; j++) {
  if(new_links[j].className == "new_link") {
   new_links[j].onclick = function() {
    clipboardData.setData("text",this.previousSibling.innerText);
    alert("复制成功");
    return false;
   }
  }
 }
}

function copypre() {
 var targetCode = document.getElementsByTagName("pre");
 if(document.all) {
  copycode(targetCode);
 }
}

addLoadEvent(copypre);

貌似有些麻烦，我是新手，如果各位有好的方法的话可以和我交流一下。

例子链接分别为：

1.http://www.12sui.cn/test/01/

2.http://www.12sui.cn/test/02/

标签： createElement, JavaScript, onclick, 复制

这篇文章发布于 2008年07月1日，星期二，11:02，归类于 编码。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。