最近、作業のニーズにより、要素をクリックして表示した後、DOM要素を動的に作成する必要があります。したがって、私はいくつかの関連JS関数を書き、ここに記録してメモを作成しました。
/** //*DOM要素を動的に作成するための関連機能は、www.jcodecraeer.com*//** //*特定の要素 @objのID文字列のDOMオブジェクトを取得します*/function getElement（obj）{return typeof obj == 'string'？document.getelementbyid（obj）：obj; }/** //*要素の位置を取得します @objの要素のDOMオブジェクト、または要素のID*/function getobjectposition（obj）{obj = typeof obj === 'string'？getelement（obj）：obj; if（！obj）{return; } var position = ''; is（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; }戻る位置。 }}/** //*バウンドイベントのDOMオブジェクトのDOMオブジェクトのダイナミットバインドイベント@seventTypeバウンドイベント名の名前、イベント名は「クリック」@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バウンドイベント名を削除します。イベント名は追加されていないことに注意してください。 otarget.RemoveEventListener（SeventType、fnhandler、false）} else if（otarget.detachevent）// ies {otarget.detachevent（seventtype、fnhandler）; } else {otarget ['on'+seventtype] = undefined; }}/** //*動的domオブジェクトの作成@domparamsは、作成されたオブジェクトの属性のJSON式です。これには次の属性があります。入力/フォーム、@content作成されたオブジェクトコンテンツ@otherAttributesは、[{attrname： 'style.color'、属性： 'red'}] @eventregistersなど、作成する機能に必要な属性を除いて他の属性を追加します。フォーム：{parentNode：document.body、domtag： 'div'、content： 'this this tiest'、otherattributes：[{attrname： 'style.color'、attrvalue： 'red'}]、eventRegisters：[{eventType： 'click'、eventhandler：fnhandler）} 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 etcは要素属性であり、違いに注意してください}/** //*属性*/if（null！= domparams.otherattributes）{for（var i = 0; i <domparams.oterattributes.length; i ++）{var otherattributes = domparams.tributes [i]; dynobj.setattribute（oterattribute.attrname、otherattribute.attrvalue）; }}/** //*end end add attribute*//** //*関連イベントの追加*/if（null！= domparams.eventregisters）{for（var i = 0; i <domparams.eventregisters.length; i ++）{var eventregister = domparams.eventregisters [i]; AddEventHandler（dynobj、eventregister.eventtype、eventregister.eventhandler）; }}/** //*関連イベントの追加*/try {childNodeaction（ 'append'、domparams.parentnode、dynobj）; } catch（$ e）{} return dynobj; }/** // ** parent node @ActionTypeのデフォルトから子ノードを削除すると、文字列を入力します| @ParentNodeの親ノードのDOMオブジェクト、または親ノードのID @CHILDNODEのID @ChildNodeのDOMオブジェクトが削除されたか、子ノードのIDが削除された */ 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 = [{actrunname： 'class'、astrvalue： 'style name'} // ies、{actrname： 'classname'、aTritvalue： 'style name'} // var newhtmldom = dyncreatedomobject（domparams）; //フォームsetattribute（ 'style'、 'position：absolute ..........'）//を介してスタイルを指定します。次の形式でのみ行うことができますjiongnewhtmldom.style.zindex = '8888'; newhtmldom.style.position = 'absolute'; newhtmldom.style.left = '100px'; newhtmldom.style.top = '200px'; newhtml.lmedom.style.tyle.tyle.tyle.tyle.tyle.top = ';