Недавно, из -за рабочих потребностей, мне нужно динамически создать элемент DOM после нажатия на элемент и отобразить его. Поэтому я написал несколько связанных функций JS и записал их здесь, чтобы сделать записку:
/** //*Связанные функции для динамического создания элементов DOM Поддержка www.jcodecraeer.com*///* //*Получить объект DOM определенного элемента @obj's string*/function getelement (obj) {return typeof obj == 'string'? Document.getElementById (obj): obj; }/** //*Получить позицию элемента @obj's dom объект элемента или идентификатор элемента*/function getObjectPosition (obj) {obj = typeOf obj === 'String'? GetElement (obj): obj; if (! obj) {return; } var position = ''; if (obj.getBoundingClientRect) // для ies {position = obj.getBoundingClientRect (); return {x: position.left, y: position.top}; } else if (document.getboxObjectfor) {position = document.getboxObjectfor (obj); return {x: position.x, y: position.y}; } else {position = {x: obj.offsetleft, y: obj.offsettop}; var parent = obj.offsetparent; while (parent) {position.x+= obj.offsetleft; position.y+= obj.offsettop; родитель = obj.offsetParent; } return Position; }}/** //*Dynamical Bind Event для объекта DOM @Otarget объект DOM связанного события @SeventType Имя связанного события, обратите внимание, что имя события не добавлено, например, 'Click' @fnhandler Функция обработчика событий*/функция addEventhandler (otarget, seventtype, fnhandler) {if (otarget.AddList otarget.addeventListener (SeventType, fnhandler, false); } else if (otarget.attachevent) // для ies {otarget.attachevent ("on" + seventype, fnhandler); } else {otarget ["on" + seventtype] = fnhandler; }}/** //*Удалить событие с объекта DOM @Otarget объект DOM связанного события @SeventType Имя связанного события, обратите внимание, что имя события не добавлено, например, 'Click' @fnhandler Функция обработчика событий*/functionEventhandler (otarget, seventType, fnhandler) {if (otarget.RemoveEv Otarget.RemoveEventListener (SeventType, fnhandler, false)} else if (otarget.detachevent) // для ies {otarget.detachevent (seventtype, fnhandler); } else {otarget ['on'+seventType] = не определен; }}/** //*Создать динамический объект DOM @domparams - это JSON Expression Attributes созданного объекта, который имеет следующие атрибуты: @parentnode, родительский элемент, к которому принадлежит созданный объект (может быть идентификатор элемента или объект Dom) @domid Ввод/Форма, @content Содержание созданного объекта @otherattributes Добавьте другие атрибуты, за исключением необходимых атрибутов для созданной функции, такой как [{attrname: 'style.color', attrvalue: 'red'}] @eventregisters Добавить события в созданный объект, аналогичный массивам, схоже с [{eventtype: 'click', eventhandler: adsfas Форма: {parentnode: document.body, domtag: 'div', content: 'это тестируется', другие атттрибуты: [{attrname: 'style.color', attrvalue: 'red'}], Event Registers: [{eventtype: 'clic if (getElement (domparams.domd)) {childnodeaction ('remove', domparams.parentnode, domparams.domd); } var dynobj = document.createElement (domparams.domtag); С (dynobj) {// id также может быть передана через другие аттрибуты, но из -за специальности ID объект // json все еще используется здесь, и атрибут DOM ID прикреплен к id = domparams.domid; innerHtml = domparams.content; // innerhtml - это атрибут DOM, в то время как ID и т. Д. - это атрибуты элемента, обратите внимание на разницу}/** //*добавить атрибут*/if (null! dynobj.setattribute (orethattribute.attrname, orethattribute.attrvalue); }}/** //*end Добавить атрибут*//** //*Добавить связанные события*/if (null! = domparams.eventregisters) {for (var i = 0; i <domparams.eventregisters.length; i ++) {var eventregister = domparams.eventregisters [i]; addeventhandler (dynobj, eventregister.eventtype, eventregister.eventhandler); }}/** //*end Добавить связанные события*/try {childnodeaction ('append', domparams.parentnode, dynobj); } catch ($ e) {} return dynobj; }/** // ** Удалить дочерние узлы из родительского узла @ActionType по умолчанию добавлять, введите строку Приложение | Удалить @ParentNode объект DOM родительского узла или идентификатор родительского узла @ChildNode объект DOM дочернего узла был удален или идентификатор дочернего узла был удален */ function ChildNodeaction (actionType, parentnode, childnode) {if (! parentnode) {return; } parentNode = typeOf parentNode === 'string'? getElement (parentNode): parentNode; childnode = typeof ChildNode === 'string'? getElement (ChildNode): ChildNode; if (! parentnode ||! Childnode) {return;} var action = actiontype.tolowercase (); if (null == actiontype || action.length <= 0 || action == 'append') {action = 'parentnode.appendchild'; } else {action = 'parentnode.removechild'; } try {eval (action) (ChildNode); } catch ($ e) {alert ($ e.message); }}Пример использования:
var htmlattributes = [{attrname: 'class', attrvalue: 'name'} // for ies, {attrname: 'classname', attrvalue: 'name'} // for ff] var domparams = {domtag: 'div', content: 'div' innerhtml of dynamic div ', jotherattrite:' div ',' content: 'div' innerhtml of dydip ', другие var newhtmldom = dyncreatedomobject (domparams); // Укажите стиль через форму setattribute ('style', 'position: Absolute ............') // не имеет эффекта. Это может быть сделано только с помощью следующей формы, jiongnewhtmldom.style.zindex = '8888'; newhtmldom.style.position = 'Absolute'; newhtmldom.style.left = '100px'; newhtmldom.style.top = '200px'; newhtmldom.