Phiên bản đầy đủ: jsB@nk » Thủ thuật » JavaScript thêm bớt các đối tượng HTML với DOM
URL: https://www.javascriptbank.com/javascript-add-remove-html-elements-with-dom.html
Hiệu ứng JavaScript này sử dụng các kĩ thuật lập trình với DOM để thêm/bớt các đối tượng thẻ HTML. Một hiệu ứng JavaScript đơn giản nhưng khá tốt để tập làm quen dần với DOM.Hãy tìm hiểu thêm về DOM với JavaScript có trên jsB@nk: - Ẩn/hiện vùng nhập liệu với JavaScript hướng đối tượng - JavaScript tạo chỉ mục tự động với DOM - Thêm không hạn chế vùng nhập liệu
Phiên bản đầy đủ: jsB@nk » Thủ thuật » JavaScript thêm bớt các đối tượng HTML với DOM
URL: https://www.javascriptbank.com/javascript-add-remove-html-elements-with-dom.html
<script type="text/javascript">// Created by: Dustin Diaz | http://www.dustindiaz.com/// This script downloaded from www.JavaScriptBank.comvar Dom = { get: function(el) { if (typeof el === 'string') { return document.getElementById(el); } else { return el; } }, add: function(el, dest) { var el = this.get(el); var dest = this.get(dest); dest.appendChild(el); }, remove: function(el) { var el = this.get(el); el.parentNode.removeChild(el); }};var Event = { add: function() { if (window.addEventListener) { return function(el, type, fn) { Dom.get(el).addEventListener(type, fn, false); }; } else if (window.attachEvent) { return function(el, type, fn) { var f = function() { fn.call(Dom.get(el), window.event); }; Dom.get(el).attachEvent('on' + type, f); }; } }()};Event.add(window, 'load', function() { var i = 0; Event.add('add-element', 'click', function() { var el = document.createElement('p'); el.innerHTML = 'Remove This Element (' + ++i + ')'; Dom.add(el, 'content'); Event.add(el, 'click', function(e) { Dom.remove(this); }); });});</script><div id="doc"> <p id="add-element">Add Elements</p> <div id="content"></div></div>