管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JavaScript 就地编辑HTML节点实现代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>点击编辑当前内容</title>

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Avar%20EditField%3D%7B%20%0D%0Aconfigure%3Afunction(id)%7B%20%0D%0Athis.id%3Did%3B%20%0D%0A%0D%0Athis.createElements()%3B%20%2F%2F%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E7%BC%96%E8%BE%91%E8%BE%93%E5%85%A5%E6%A1%86%20%0D%0Athis.toScan()%3B%20%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86%E5%92%8C%E6%8C%89%E9%92%AE%E3%80%81%E5%BE%85%E7%BC%96%E8%BE%91%E7%9A%84DOM%E5%85%83%E7%B4%A0%E7%9A%84display%E5%B1%9E%E6%80%A7%20%0D%0Athis.addEvents()%3B%20%2F%2F%E7%BB%99%E7%9B%B8%E5%85%B3%E7%9A%84DOM%E5%85%83%E7%B4%A0%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%E7%9B%91%E5%90%AC%E5%99%A8%20%0D%0A%7D%2C%20%0D%0Aevents%3Afunction(elem%2Ctype%2Cfn)%7B%20%2F%2F%E7%94%A8%E4%BA%8E%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%E7%9A%84%E9%80%9A%E7%94%A8%E5%87%BD%E6%95%B0%20%0D%0Aif(elem.attachEvent)%7B%20%0D%0Aelem.attachEvent(%22on%22%2Btype%2Cfn)%3B%20%0D%0A%7Delse%20if(elem.addEventListener)%7B%20%0D%0Aelem.addEventListener(type%2Cfn%2Cfalse)%3B%20%0D%0A%7Delse%7B%20%0D%0Aelem%5B%22on%22%2Btype%5D%3Dfn%3B%20%0D%0A%7D%20%0D%0Areturn%20elem%3B%20%0D%0A%7D%2C%20%0D%0AaddEvents%3Afunction()%7B%20%2F%2F%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%20%0D%0Avar%20that%3Dthis%3B%20%0D%0Athis.events(this.btnSubmit%2C%22click%22%2Cfunction()%7B%20%0D%0Athat.save()%3B%20%0D%0A%7D)%3B%20%0D%0Athis.events(this.btnCancel%2C%22click%22%2Cfunction()%7B%20%0D%0Athat.cancel()%3B%20%0D%0A%7D)%3B%20%0D%0Athis.events(document.getElementById(this.id)%2C%22click%22%2Cfunction()%7B%20%0D%0Athat.toEdit()%3B%20%0D%0A%7D)%3B%20%0D%0A%7D%2C%20%0D%0AinsertAfter%3Afunction(newNode%2CreferenceNode)%7B%20%2F%2F%E5%B0%86%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E7%9A%84%E8%BE%93%E5%85%A5%E6%A1%86%E5%92%8C%E6%8C%89%E9%92%AE%E6%8F%92%E5%85%A5%E5%88%B0%E5%BE%85%E7%BC%96%E8%BE%91%E5%85%83%E7%B4%A0%E7%9A%84%E5%90%8E%E9%9D%A2%20%0D%0Aif%20(referenceNode.nextSibling)%20%7B%20%0D%0AreferenceNode.parentNode.insertBefore(newNode%2C%20referenceNode.nextSibling)%3B%20%0D%0A%7Delse%7B%20%0D%0Avar%20p%3DreferenceNode.parentNode%20%7C%7C%20document.body%3B%20%0D%0Ap.appendChild(newNode)%3B%20%0D%0A%7D%20%0D%0A%7D%2C%20%0D%0AcreateElements%3Afunction()%7B%20%2F%2F%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E8%BE%93%E5%85%A5%E6%A1%86%E5%92%8C%E6%8C%89%E9%92%AE%20%0D%0Athis.divContainer%3Ddocument.createElement(%22div%22)%3B%20%0D%0A%2F%2Fthis.parentElement.appendChild(this.divContainer)%3B%20%0D%0Athis.insertAfter(this.divContainer%2Cdocument.getElementById(this.id))%3B%20%0D%0A%0D%0Athis.input%3Ddocument.createElement(%22input%22)%3B%20%0D%0Athis.input.type%3D%22text%22%3B%20%0D%0Athis.input.value%3Ddocument.getElementById(this.id).innerHTML%3B%20%2F%2F%E5%88%9D%E5%A7%8B%E5%8C%96%E5%80%BC%20%0D%0Athis.divContainer.appendChild(this.input)%3B%20%0D%0A%0D%0Athis.btnSubmit%3Ddocument.createElement(%22input%22)%3B%20%0D%0Athis.btnSubmit.value%3D%22Submit%22%3B%20%0D%0Athis.btnSubmit.type%3D%22button%22%3B%20%0D%0Athis.divContainer.appendChild(this.btnSubmit)%3B%20%0D%0A%0D%0Athis.btnCancel%3Ddocument.createElement(%22input%22)%3B%20%0D%0Athis.btnCancel.type%3D%22button%22%3B%20%0D%0Athis.btnCancel.value%3D%22Cancel%22%3B%20%0D%0Athis.divContainer.appendChild(this.btnCancel)%3B%20%0D%0A%0D%0A%0D%0A%7D%2C%20%0D%0AtoEdit%3Afunction()%7B%20%2F%2F%E8%BD%AC%E6%8D%A2%E6%88%90%E7%BC%96%E8%BE%91%E7%8A%B6%E6%80%81%20%0D%0Athis.divContainer.style.display%3D%22block%22%3B%20%0D%0Adocument.getElementById(this.id).style.display%3D%22none%22%3B%20%0D%0Athis.setValue()%3B%20%0D%0A%7D%2C%20%0D%0AtoScan%3Afunction()%7B%20%2F%2F%E8%BD%AC%E6%8D%A2%E6%88%90%E6%B5%8F%E8%A7%88%E7%8A%B6%E6%80%81%20%0D%0Adocument.getElementById(this.id).style.display%3D%22block%22%3B%20%0D%0Athis.divContainer.style.display%3D%22none%22%3B%20%0D%0A%7D%2C%20%0D%0AgetValue%3Afunction()%7B%20%2F%2F%E8%8E%B7%E5%8F%96%E8%BE%93%E5%85%A5%E6%A1%86%E7%9A%84%E5%80%BC%20%0D%0Areturn%20this.input.value%3B%20%0D%0A%7D%2C%20%0D%0AsetValue%3Afunction()%7B%20%2F%2F%E8%AE%BE%E7%BD%AE%E8%BE%93%E5%85%A5%E6%A1%86%E7%9A%84%E5%80%BC%20%0D%0Athis.input.value%3Ddocument.getElementById(this.id).innerHTML%3B%20%0D%0A%7D%2C%20%0D%0Asave%3Afunction()%7B%20%2F%2F%E4%BF%9D%E5%AD%98%E7%BC%96%E8%BE%91%E7%BB%93%E6%9E%9C%20%0D%0Adocument.getElementById(this.id).innerHTML%3Dthis.getValue()%3B%20%0D%0Athis.toScan()%3B%20%0D%0A%7D%2C%20%0D%0Acancel%3Afunction()%7B%20%2F%2F%E5%8F%96%E6%B6%88%E5%BD%93%E5%89%8D%E7%9A%84%E7%BC%96%E8%BE%91%20%0D%0Athis.toScan()%3B%20%0D%0A%7D%20%0D%0A%7D%3B%20%0D%0A%0D%0Aonload%3Dfunction()%7B%20%0D%0AEditField.configure(%22p%22)%3B%20%2F%2F%E8%B0%83%E7%94%A8configure%E5%87%BD%E6%95%B0%EF%BC%8C%E7%A1%AE%E5%AE%9A%E9%82%A3%E4%B8%AADOM%E5%85%83%E7%B4%A0%E8%BF%9B%E8%A1%8C%E5%B0%B1%E5%9C%B0%E7%BC%96%E8%BE%91%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E">

</head> 
<body> 
<h3>Edit Demo</h3> 
<p id="p">管理资源吧 www.glzy8.com</p> 
<p>Copyright:Super sha.</p> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程