Recentemente, devido às necessidades de trabalho, preciso criar dinamicamente um elemento DOM depois de clicar em um elemento e exibi -lo. Portanto, escrevi algumas funções JS relacionadas e as gravei aqui para fazer um memorando:
/** //*Funções relacionadas para criar dinamicamente elementos DOM Suporte www.jcodecraeer.com*//** //*Obtenha o objeto DOM de um determinado elemento @string id de obj*/function getElement (obj) {typeof obj == 'string'? }/** //*Obtenha a posição de um elemento @objeto dom de obj do elemento, ou o ID do elemento*/function getObjectPosition (obj) {obj = typeof obj === 'string'? GetElement (obj): obj; if (! obj) {return; } var position = ''; if (obj.getBoundingClientRect) // para 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 pai = obj.offsetParent; while (parent) {position.x+= obj.offsetleft; position.y+= obj.offSettop; pai = obj.offsetParent; } posição de retorno; }}/** //*Vincular dinamicamente o evento para um objeto DOM @Otarget O objeto DOM do evento ligado @SeventType o nome do evento ligado, observe que o nome do evento não é adicionado, como 'clique' @fnhandler o manipulador de eventos ligado)/function addEventHandler (otarget, SeventType, fnhandler) {se otarget.addeventListener (SeventType, fnhandler, false); } else if (otarget.attachevent) // para ies {otarget.attachevent ("on" + seventtype, fnhandler); } else {otarget ["on" + seventType] = fnhandler; }}/** //*Remova um evento de um objeto DOM @Otarget O objeto Dom do evento ligado @SeventType o nome do evento ligado, observe que o nome do evento não é adicionado, como 'clique' @fnhandler a função de manipulador de eventos vinculada*/function RemoneventHandler (OTarget, seventype, fnhandler) {se otarget.removeEventListener (SeventType, fnhandler, false)} else if (otarget.detachevent) // para ies {otarget.detachevent (seventtype, fnhandler); } else {otarget ['on'+seventType] = indefinido; } } /**//* Create a dynamic DOM object @domParams is a JSON expression of the attributes of the created object, which has the following attributes: @parentNode The parent element to which the created object belongs (can be element ID or DOM object) @domId The ID of the created object is created @domTag The tag name of the created object, supports commonly used layout elements, such as div span, etc., but does not support special elements such as Input/Form, @Content O conteúdo do objeto criado @otherattributes Adicionar outros atributos, exceto os atributos necessários para a função a ser criada, como [{attName: 'style.color', atrvalue: 'Red'}] @EventRegists Add Events to the Created Object, Arrays semelhante a [{{EventType Formulário: {parentNode: document.body, domtag: 'div', conteúdo: 'Isso é testado', outros tributes: [{attName: 'style.color', attValue: 'Red'}], EventRegisters: [{EventType: 'Click', EventHandler: fnHandler}]} * * if (getElement (domparams.domid)) {ChildNodeAction ('remover', domparams.parentnode, domparams.domid); } var dynobj = document.createElement (domparams.domtag); com (dynobj) {// id também pode ser passado através de outros atributos, mas devido à especialidade do id, o objeto // json ainda é usado aqui e o atributo DOM ID está anexado a id = domparams.domid; INNERHTML = Domparams.Content; // innerhtml é um atributo dom, enquanto o id etc são atributos de elemento, preste atenção à diferença}/** //*Adicione atributo*/if (null! dynobj.setAttribute (otherAttribute.attrname, otherAttribute.attrValue); }}/** //*Adicionar atributo*//** //*Adicione eventos relacionados*/if (null! = Domparams.eventRegisters) {for (var i = 0; i <domparams.eventregisters.length; i ++) {var eventRegister = domparams.eventRegisters [i]; addEventHandler (Dynobj, EventRegister.EventType, EventRegister.EventHandler); }}/** //*Adicione eventos relacionados*/try {ChildNodeAction ('Append', Domparams.parentNode, dynobj); } catch ($ e) {} return dynobj; }/** // ** Exclua os nós filhos dos padrões do nó dos pais @ActionTyPE para anexar, digite String Append | Remova @parentNode O objeto DOM do nó pai ou o ID do nó pai @ChildNode O objeto DOM do nó filho foi excluído ou o ID do nó filho foi excluído */ função ChildNodeAction (ActionType, ParentNode, ChildNode) {if (! ParentNode) {Return; } parentNode = typeof parentNode === 'string'? getElement (parentnode): parentNode; ChildNode = typeOf ChildNode === 'String'? GetElement (ChildNode): ChildNode; se (! if (null == ActionType || Action.Length <= 0 || Action == 'Append') {Action = 'parentNode.appendChild'; } else {Action = 'parelernode.removeChild'; } tente {avaliar (ação) (ChildNode); } catch ($ e) {alert ($ e.message); }}Exemplo de uso:
var htmlattributes = [{attName: 'class', attValue: 'Nome do estilo'} // para ies, {attName: 'ClassName', attValue: 'Nome do estilo'} // para ff] var domParams = {domtag: 'div', 'Div' 'innerHtMl de dinâmico' var newhtmldom = dynCreatedomObject (Domparams); // Especifique o estilo através do formulário setAttribute ('estilo', 'posição: absoluto ............') // não tem efeito. Isso só pode ser feito por uma forma a seguir, jiongnewhtmldom.style.zindex = '8888'; newhtmldom.style.position = 'absoluto'; newhtmldom.style.left = '100px'; newhtmldom.style.top = '200px';