최근에 작업이 필요하기 때문에 요소를 클릭 한 후 DOM 요소를 동적으로 생성하고 표시해야합니다. 따라서 관련 JS 기능을 작성하고 메모를 만들기 위해 여기에 녹음했습니다.
/** //*DOM 요소를 동적으로 생성하기위한 관련 함수 www.jcodecraeer.com*//** //*특정 요소의 dom 개체 @obj의 id 문자열*/function getelement (obj) {return typeof obj == 'string'? getElementById (obj) : obj; }/** //*요소의 요소 @obj의 dom 객체 또는 요소의 ID의 위치를 가져옵니다*/function getObjectPosition (obj) {obj = typeof obj === 'string'? getElement (obj) : obj; if (! obj) {return; } var 위치 = ''; if (obj.getBoundingClientRect) // ies {position = obj.getBoundingClientRect (); 반환 {x : position.left, y : position.top}; } else if (document.getBoxObjectFor) {position = document.getBoxObjectFor (OBJ); {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; } 반환 위치; }}/** //*dom object의 동적 바인딩 이벤트 @otarget 바운드 이벤트의 dom 객체 @seventType 바운드 이벤트 이름은 'click'@fnhandler와 같은 이벤트 이름이 추가되지 않음을 주목하십시오. otarget.addeventListener (Seventtype, fnhandler, false); } else if (otarget.attachevent) // ies {otarget.attachevent ( "on" + Seventtype, fnhandler); } else {otarget [ "on" + Seventtype] = fnhandler; }}/** //*dom 객체에서 이벤트를 제거 @OTARGET 바운드 이벤트의 dom 개체 @SeventType 바운드 이벤트 이름은 '@fnhandler'@fnhandler와 같은 이벤트 이름이 추가되지 않음을 주목하십시오. otarget.removeeventListener (Seventtype, fnhandler, false)} else if (otarget.detachevent) // ies {otarget.detachevent (Seventtype, fnhandler); } else {otarget [ 'on'+Seventtype] = 정의되지 않은; }}/** //*동적 dom 객체 생성 @domparams는 다음과 같은 속성을 갖는 생성 된 객체의 속성의 json 표현식입니다. 입력/양식, @Content 생성 된 객체 내용 @otherattributes는 [{attrname : 'style.color', attrvalue : 'red'}와 같은 기능이 생성되는 데 필요한 속성을 제외하고 다른 속성을 추가합니다. @eventRegisters는 [eventType : '이후에 다음과 유사한 배열과 유사한 생성 된 개체에 이벤트를 추가합니다. 다음 형식 : {parentnode : document.body, domtag : 'div', content : '이것은 테스트되었습니다', 기타 Attributes : [{attrname : 'style.color', attrvalue : 'red'}], eventRegisters : [{eventType : 'click', eventHandler : fnhandler}} {/ function discreated (domparamsed) if (getElement (domparams.domid)) {childnodeaction ( 'remove', domparams.parentnode, domparams.domid); } var dynobj = document.createElement (domparams.domtag); (dynobj) {// id는 다른 attributes를 통해 전달 될 수 있지만 ID의 특수성으로 인해 // json 객체는 여전히 여기에 사용되며 dom id 속성은 id = domparams.domid에 첨부됩니다. innerhtml = domparams.content; // innerHtml은 dom 속성이며, ID 등은 요소 속성이며, 차이에주의를 기울이십시오}/** //*속성 추가*/if (null! = domparams.otherattributes) {for (var i = 0; i <domparams.length.length; i ++) {var elothattribute = domparams. Dynobj.setAttribute (기타 attribute.attrName, OtherAttribute.attrValue); }}/** //*end add add add add add*//** //*관련 이벤트 추가*/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 add add add add add adde*/try {childnodeaction ( '부록', domparams.parentNode, dynobj); } catch ($ e) {} return dynobj; }/** // ** 부모 노드에서 자식 노드 삭제 @ActionType 기본값을 추가하려면 문자열 부록을 입력하십시오 | @parentNode 부모 노드의 dom 객체 또는 상위 노드의 dom 객체 또는 @childnode @childnode 자식 노드의 dom 객체가 삭제되었거나 하위 노드의 ID가 삭제되었습니다 */ function childnodeaction (actiontype, parentnode, childnode) {if (! parentnode) {return; } parentnode = typeof parentnode === 'string'? getElement (parentnode) : parentnode; childnode = 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 : 'style name'} // ies 용 {attrname : 'classname :'style name '} // ff의 경우'style name '} //'div ', content :'div 'innerhtml of dynictib}; var newhtmldom = dyncreatedomobject (domparams); // setattribute 양식 ( 'style', 'position : alperte ............')을 통해 스타일을 지정하십시오. // 효과가 없습니다. 다음 형식으로 만 수행 할 수 있습니다.