최근에는 모든 주요 라이브러리가 div.innerHTML=HTML 조각을 사용하여 노드 요소를 생성한 다음 이를 대상 요소의 다양한 위치에 삽입할 수 있다는 것을 발견했습니다. 이것은 실제로 insertAdjacentHTML이지만 IE의 지독한 innerHTML은 이러한 장점을 단점으로 바꿉니다. 먼저 innerHTML은 특정 위치의 공백을 제거합니다. 아래 실행 상자의 결과를 확인하세요.
<br> IE의 InnerHtml By Situ Zhengmei <br> & lt;/Title & GT; <br> & LT; Script Type = "Text/Javascript" & GT; Window.onload = Function () {<br> VAR DIV = D = D = D = D ocument.createelement ( "div");<br> div.innerHTML = " <td> <b>Situ</b>정미 " "<br> " Alert(" |" div.innerHTML "|"); <br> var c = div.childNodes; <br> Alert(c[i].nodeType);<br> if(c[i].nodeType === 1){ <br> Alert(":: " c[i] .childNodes.length);<br> ><br> <br>
<br></html><br>
<br><br><br>
<br>또 다른 불쾌한 점은 IE에서 col, colgroup,frameset, html, head, style, table, tbody, tfoot, thead, title 및 tr 요소의 innerHTML이 읽기 전용이라는 것입니다. 이를 정리하기 위해 Ext는 특별히 insertIntoTable을 만들었습니다. insertIntoTable은 DOM의 insertBefore 및 AppendChild를 사용하여 추가됩니다. 상황은 기본적으로 jQuery와 동일합니다. 그러나 jQuery는 이 두 가지 방법에 전적으로 의존하고 있으며 Ext도 insertAdjacentHTML을 사용합니다. 효율성을 높이기 위해 모든 클래스 라이브러리는 변함없이 문서 조각화를 사용합니다. 기본 프로세스는 div.innerHTML을 통해 노드를 추출한 다음 이를 문서 조각으로 전송한 다음 insertBefore 및 AppendChild를 사용하여 노드를 삽입하는 것입니다. Firefox의 경우 Ext는 createContextualFragment를 사용하여 텍스트를 구문 분석하고 대상 위치에 직접 삽입합니다. 분명히 Ext는 jQuery보다 훨씬 빠릅니다. 그러나 jQuery는 HTML 조각뿐만 아니라 다양한 노드와 jQuery 객체도 삽입합니다. jQuery 워크플로를 검토해 보겠습니다. <br>
<br><br><br><p>코드 복사</p>
<p></p>
</div> 코드는 다음과 같습니다.<div class="codebody" id="code51724">
<br>append: function() { <br> //인수 객체를 전달합니다. true는 테이블의 특수 처리, 콜백 함수를 의미합니다. <br> return this.domManip(arguments, true, function(elem){ <br> if (this.nodeType == 1) <br> this.appendChild( elem ); <br> }) <br>}, <br>domManip: function( args, table, callback ) { <br> if ( this[0] ) {//요소 노드가 있는 경우 <br> var 조각 = (this[0].ownerDocument || this[0]).createDocumentFragment(), <br> //3개는 다음과 같습니다. 여기에 전달된 매개변수 <br> scripts = jQuery.clean( args, (this[0].ownerDocument || this[0]), 조각 ), <br> first = 조각.firstChild <br><br> if ( first ) <br> for ( var i = 0, l = this.length; i < l; i ) <BR> callback.call( root(this[i], first), this.length > 1 || i > 0 ? <br> 조각.cloneNode(true) : <br><br> if ( 스크립트 ) <br> jQuery.each( 스크립트, evalScript ) <br><br> return this <br><br> function root( elem, cur ) { <br> return table && jQuery.nodeName(elem, "table") && jQuery.nodeName(cur, "tr") <br> (elem .getElementsByTagName ("tbody")[0] || <br> elem.appendChild(elem.ownerDocument.createElement("tbody"))) : <br> elem; <br> } <br>} <br>// elems는 인수 객체이고, context는 문서 객체이고, 조각은 빈 문서 조각입니다. <br>clean: function( elems, context,fragment ) { <br> context = context <br><br> // !context.createElement는 오류와 함께 IE에서 실패하지만 '객체' 유형을 반환합니다. <br> if ( typeof context.createElement === "undefine" ) <br> //컨텍스트가 문서 객체인지 확인하세요<br> context = context .ownerDocument || context[ 0] && context[0].ownerDocument || document; <br><br> // 단일 문자열이 전달되고 단일 태그인 경우 <br> // createElement를 수행하고 건너뜁니다. 나머지 <br> / /문서 객체에 <div> <br>와 같은 태그가 하나만 있는 경우 $(this).append("<div>" ) <br> //이때 안에 들어있는 요소명을 직접 꺼내서 document.createElement("div")로 생성하고 배열에 넣어서 return <br> if ( !fragment && elems.length == = 1 && typeof elems[0] === "string " ) { <br> var match = /^<(w )s*/?>$/.exec(elems[0]) <br> if ( match ) <br> return [ context.createElement( match [1] ) ]; <br> } <br> //div의 innerHTML을 사용하여 노드 생성 <br> var ret = [], scripts = [] , div = context.createElement("div"); <br> //$(this).append("<td>테이블 1</td>", "<td>테이블 1</td> ;", "<td>표 1</td>") <BR> //jQuery.each는 네 번째 분기 방법(매개변수 없음, 길이), callback.call( value, i, value)에 따라 에이전트 객체를 순회합니다. ) <BR> jQuery.each (elems, function(i, elem){//i는 인덱스이고 elem은 인수 객체의 요소입니다. <BR> if ( typeof elem === "number" ) <BR> elem = ''; <BR><br> if ( !elem ) <br> return; <BR><br> // html 문자열을 DOM 노드로 변환 <br> if ( typeof elem === "string" ) { <BR> // 모든 브라우저에서 "XHTML"- 스타일 태그 수정 <BR> elem = elem.replace(/(<(w )[^>]*?)/>/g, function(all, front, 태그){ <br> 태그를 반환합니다. match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ? >"; <br> }); <br><br> // Trim whitespace, otherwise indexOf won't work as expected <br> var tags = elem.replace(/^\s+/, "").substring(0, 10).toLowerCase(); <br><br> var wrap = <br> // option or optgroup <br> !tags.indexOf("<opt") && <BR> [ 1, "<select multiple='multiple'>", "</select>" ] || <br><br> !tags.indexOf("<leg") && <BR> [ 1, "<fieldset>", "</fieldset>" ] || <br><br> tags.match(/^<(thead|tbody|tfoot|colg|cap)/) && <BR> [ 1, "<table>", "</table>" ] || <br><br> !tags.indexOf("<tr") && <BR> [ 2, "<table><tbody>", "</tbody></table>" ] || <br><br> // <thead> matched above <br> (!tags.indexOf("<td") || !tags.indexOf("<th")) && <BR> [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] || <br><br> !tags.indexOf("<col") && <BR> [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] || <br><br> // IE can't serialize <link> and <script> tags normally <br> !jQuery.support.htmlSerialize &&//用于创建link元素 <br> [ 1, "div<div>", "</div>" ] || <br><br> ] elem Wrap[2];//예: "<table><tbody><tr>" <td>표 1</td> tr></tbody></table> " <br><br> // 오른쪽 깊이로 이동 <br> while ( Wrap[0]-- ) <br> div = div.lastChild; <br> <br> // tbody를 자동으로 삽입하도록 IE를 처리합니다. 예를 들어 $('<thead></thead>')를 사용하여 HTML 조각을 생성합니다. 이는 <br> //'<thead><를 반환해야 합니다. ;/thead>', IE는 '<thead>< ;/thead><tbody></tbody>'를 반환합니다. <br> if ( !jQuery.support.tbody ) { <br><br> / / 문자열은 <table>입니다. *위조된 < tbody>가 있을 수 있습니다. <br> var hasBody = /<tbody/i.test(elem), <br> tbody = !tags.indexOf("<table ") && !hasBody ? <br> div.firstChild && div.firstChild .childNodes : <br><br> // 문자열은 맨손으로 <thead> 또는 <tfoot> <br> Wrap[1] == "입니다. <table>" && !hasBody ? <br> div.childNodes : <br> []; <br> for (var j = tBody.length -1; j & gt; = 0; --j) <br> // 자동으로 삽입되는 경우 콘텐츠가 없어야 합니다. <br> if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length ) <br> tbody[ j ].parentNode.removeChild( tbody[ j ] ); <br><br> } <br><br> // IE는 innerHTML을 사용할 때 선행 공백을 완전히 제거합니다. <br> if ( !jQuery.support.leadingWhitespace && / ^s/.test( elem ) ) <br> div.insertBefore( context.createTextNode ( elem.match(/^s*/)[0] ), div.firstChild ) <br> //모든 노드를 순수 노드로 만듭니다. arrays<br> elem = jQuery.makeArray( div.childNodes ); <br> } <br><br> if ( elem.nodeType ) <br> ret.push( elem ) <br> else<br> // 두 배열을 병합하면 merge 메서드가 IE param 요소 <br> ret = jQuery.merge( ret, elem ) <br><br> }) <br><br> 아래에서 개체 요소가 사라지는 것을 처리합니다. (fragment ) { <br> for ( var i = 0; ret[i] ; i ) { <br> //첫 번째 레이어의 childNodes에 스크립트 요소 노드가 있는 경우 스크립트를 사용하여 나중에 globalEval을 사용하여 동적 실행을 위해 이를 수집합니다. <br> if ( jQuery.nodeName( ret[i], " script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) { <br> scripts.push( ret[i].parentNode ? ret [i].parentNode.removeChild( ret[i] ) : ret[i] ); <br> ~ . nodeType === 1 ) <br> ret. splice.apply( ret, [i 1, 0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))) <br> 조각.appendChild( ret[i] ); } <br> } <br><br> return scripts;//동적 삽입이 세 개의 매개변수로 전달되므로 <br>이 여기에 반환됩니다. } <br><br> return <br>}, <br>
<br><br>
<p><img src="http://files.jb51.net/file_images/article/201311/20131112145628668.jpg" alt="자바스크립트 동적 삽입 기술에 대한 심층적인 이해_javascript 기술" ></p>
<p>너무 복잡해서 눈물이 나요! 그러나 jQuery의 구현은 clean을 사용하여 삽입된 모든 항목을 노드 컬렉션으로 변환한 다음 이를 문서 조각에 넣은 다음 appendChild 및 insertBefore를 사용하여 삽입합니다. 현재 Firefox를 제외한 다른 브라우저는 insertAdjactentXXX 제품군을 지원하므로 이러한 기본 API를 잘 활용해야 합니다. 다음은 insertAdjactentHTML 및 기타 메소드를 사용하여 Ext에서 구현한 DomHelper 메소드입니다. 공식 웹사이트에서 제공한 데이터입니다. </p>
<p><img src="http://files.jb51.net/file_images/article/201311/20131112145751246.jpg" alt="자바스크립트 동적 삽입 기술에 대한 심층적인 이해_javascript 기술" ></p>
<p>이 데이터는 약간 오래된 데이터이며 최신 3.03에서는 IE 테이블에 콘텐츠를 삽입하는 것에 대한 비판을 오랫동안 해결했습니다(테이블의 innerHTML, tbody, tr 등은 모두 읽기 전용이며 insertAdjactentHTML 및 PasteHTML과 같은 메서드). 내용을 수정할 수 없습니다. 느린 표준 DOM 접근 방식을 사용해야 하며 이는 Ext의 초기 버전이 실패한 부분입니다. insertAdjactentHTML과 문서 조각화를 결합한 후 IE6의 노드 삽입 속도도 놀라울 정도로 향상되어 Firefox에 거의 근접한 것을 볼 수 있습니다. 이를 기반으로 Ext는 각각 jQuery의 before, after, prepend 및append에 해당하는 네 가지 분기 메소드 insertBefore, insertAfter, insertFirst 및 app를 개발했습니다. 그러나 jQuery는 이러한 메서드를 호출자 및 수신 매개 변수와 교묘하게 교체하여 insertBefore, insertAfter, prependTo 및 appendTo 메서드를 파생시켰습니다. 그러나 어떤 경우에도 jQuery의 일률적인 접근 방식은 동의하기 어렵습니다. 다음은 Firefox에 구현된 insertAdjactentXXX 계열 버전입니다. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="29698" class="copybut" id="copybut29698" onclick="doCopy('code29698')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div>
<div class="codebody" id="code29698">
<br>(function() { <br> if (여기서는 'HTMLElement') { <br> If('insertAdjacentHTML' in HTMLElement.prototype) { <br> return<br> } <br> } else { <br> return<br> } <br><br> function insert( w, n) { <br> switch(w.toUpperCase()) { <br> case 'BEFOREEND' : <br> this.appendChild(n) <br> break<br> case 'BEFOREBEGIN' : <br> this .parentNode.insertBefore(n, this) <br> break<br> case 'AFTERBEGIN' : <br> this.insertBefore(n, this.childNodes[0]) <br> break<br> case ' AFTEREND ' : <br> this.parentNode.insertBefore(n, this.nextSibling) <br> break<br> } <br> } <br><br> function insertAdjacentText(w, t) { insert.call(this, w , document.createTextNode(t || '')) <br> } <br><br> function insertAdjacentHTML(w, h) { <br> var r = document.createRange() <br> r.selectNode(this) <br> insert.call(this, w, r.createContextualFragment(h)) <br> } <br><br> function insertAdjacentElement(w, n) { <br> insert.call(this, w, n) <br> return n <br> } <br><br> HTMLElement.prototype.insertAdjacentText = insertAdjacentText <br> HTMLElement.prototype.insertAdjacentHTML = insertAdjacentHTML <br> HTMLElement.prototype.insertAdjacentElement = insertAdjacent Element <br>})() <br>
<p></p>
</div>
이를 사용하면 더 빠르고 합리적인 동적 삽입 방법을 설계할 수 있습니다. 제가 구현한 것 중 일부는 다음과 같습니다. <p>
</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="69219" class="copybut" id="copybut69219" onclick="doCopy('code69219')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span><div class="codebody" id="code69219">
<br>//insertAdjactentHTML의 4개 삽입 위치에 해당하는 4개의 삽입 방법, 이름은 jQuery의 <br>을 기반으로 합니다. //stuff는 문자열, 다양한 노드 또는 dom 객체(배열과 같은 객체, 편리함)일 수 있습니다. 체인 연산! ) <br>//jQuery 구현보다 코드가 더 간단하고 아름답습니다! <br> 추가:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"beforeEnd"); <br> }); }, <br> prepend:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"afterBegin"); <br> }); 🎜> }, <br> before:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"beforeBegin"); <br> }) ; <br> }, <br> after:function(stuff){ <br> return dom.batch(this,function(el){ <br> dom.insert(el,stuff,"afterEnd"); <br> }); <br> } <br>
<br><p>
</p>
</div>모두 일괄 처리와 삽입이라는 두 가지 정적 메서드를 호출합니다. DOM 객체는 배열과 유사한 객체이기 때문에 jQuery의 예를 따르고 forEach, map 및 filter와 같은 몇 가지 중요한 반복자를 구현했습니다. dom 객체에는 여러 DOM 요소가 포함되어 있으며 forEach를 사용하여 해당 요소를 탐색하고 그 안에 있는 콜백 메서드를 실행할 수 있습니다.
<p></p>
<p></p>
<div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="50656" class="copybut" id="copybut50656" onclick="doCopy('code50656')"><u></u> 코드는 다음과 같습니다.</a></span></div>batch:function(els,callback){ <div class="codebody" id="code50656"> els.forEach(콜백); <br> return els;//체인 작업<br>},<br><br><br>
</div>insert 메소드는 jQuery의 domManip 메소드(dojo는 place 메소드 사용)에 해당하는 기능을 수행하지만, insert 메소드는 요소 노드 그룹을 처리하는 jQuery와 달리 한 번에 하나의 요소 노드를 처리합니다. 클러스터 처리는 위의 배치 방식과 분리되었습니다.
<p></p>
<p></p>
<div class="codetitle"><span>코드 복사<a style="CURSOR: pointer" data="32903" class="copybut" id="copybut32903" onclick="doCopy('code32903')"><u></u> 코드는 다음과 같습니다.</a><div class="codebody" id="code32903">
<br>insert : function(el,stuff,where){ <br> //두 개의 전역 항목을 정의하고 내부 메서드 호출 제공<br> var doc = el.ownerDocument || dom.doc, <br> 조각 = doc.createDocumentFragment(); <br> if(stuff.version){//dom 객체인 경우 내부 요소 노드를 문서 조각으로 이동합니다. <br> stuff.forEach(function(el){ <br> fragment.appendChild(el); ,where){ <br> 스위치(where){ <br> case 'beforeBegin': <br> el.parentNode.insertBefore(node,el) <br> break; 'afterBegin': <br> el .srtBeFore(노드, el.firstChild); <br> 중단; <br> 사례 'BeForend': <br> El.appendingChild(노드) <br> 중단; ) el.parentNode.insertBefore(node,el.nextSibling); <br> else el.parentNode.appendChild(node); <br> break; <br> } <br> <br> // <br> dom._insertAdjacentHTML = function(el,htmlStr,where){ <br> var range = doc.createRange(); <br> 스위치(where) { <br> case "beforeBegin"://before <br> range.setStartBefore(el) > range.collapse(true); <br> break <br> case "beforeEnd"://append <br> range.collapse(el); ; <br> break; 케이스 "afterEnd"://prepend <br> range.setStartAfter(el); el,parsedHTML,where <br> }; <br> // 다음 요소의 innerHTML은 IE에서 읽기 전용입니다. insertAdjacentElement를 호출하여 삽입하면 오류가 발생합니다. <br> // col, colgroup,frameset, html, head, style, title, table, tbody, tfoot, thead, tr; <br> dom._insertAdjacentIEFix = function(el,htmlStr,where){ <br> varparsedHTML = dom.parseHTML(htmlStr,fragment) 🎜> <br> // 노드, 복사본 만들기<br> stuff.nodeType ? stuff.cloneNode(true) : stuff; <br> if (el.insertAdjacentHTML) {//ie, chrome, Opera와 Safari 모두 insertAdjacentXXX 제품군을 구현했습니다. > try{//오페라, 사파리, 크롬 및 IE에 적합 <br> el['insertAdjacent' (stuff.nodeType ? 'Element':'HTML')](where, stuff) <br> }catch(e) { <br> dom._insertAdjacentIEFix(el,stuff,where); 사용 <br> }el se{ <br> } else{ //Firefox 전용<br> dom['_insertAdjacent' (stuff.nodeType ? 'Element':' HTML')](el,stuff,where) <br> } <br> } <br>
<br><br><br>
<br>insert 메서드는 Firefox 삽입 작업을 구현할 때 W3C DOM Range 개체의 몇 가지 드문 메서드를 사용합니다. 자세한 내용은 Firefox 공식 웹사이트를 확인하세요. 다음 구현은 innerHTML이라는 훌륭한 방법을 사용하여 문자열을 노드로 변환합니다. Prototype.js는 이를 _getContentFromAnonymousElement라고 부르지만 문제가 많습니다. dojo는 이를 _toDom, mootools' Element.Properties.html, jQuery는 clean이라고 부릅니다. Ext에는 이 기능이 없으며 HTML 조각을 전달하는 insertAdjacentHTML 메서드만 지원하고 요소 노드를 전달하는 insertAdjacentElement는 지원하지 않습니다. 그러나 때때로 텍스트 노드(요소 노드에 래핑되지 않음)를 삽입해야 하고 문서 조각을 컨테이너로 사용해야 하며 삽입 메소드가 나타납니다.
<p></p>
</div>
<p></p>코드 복사<p></p>
<div class="codetitle"><span> 코드는 다음과 같습니다.<a style="CURSOR: pointer" data="59606" class="copybut" id="copybut59606" onclick="doCopy('code59606')"><div class="codebody" id="code59606">
<br>parseHTML: function(htmlStr, 조각){ <br> var div = dom.doc.createElement("div"), <br> reSingleTag = /^<(w )s*/?> $/;//<li> <br> htmlStr = '' <br> if(reSingleTag.test(htmlStr)){//str이 단일 태그인 경우 <br> return [ dom.doc .createElement(RegExp.$1)] <br> } <br> var tagWrap = { <br> option: ["select"], <br> optgroup: ["select"], <br> tbody: [ "테이블" ], <br> thead: ["테이블"], <br> tfoot: ["테이블"], <br> tr: ["테이블", "tbody"], <br> td: ["테이블 ", " tbody", "tr"], <br> th: ["table", "thead", "tr"], <br> 범례: ["fieldset"], <br> 캡션: ["table" ], <br> colgroup: ["table"], <br> col: ["table", "colgroup"], <br> li: ["ul"], <br> link:["div"] <br> } ; <br> for(var param in tagWrap){ <br> var tw = tagWrap[param] <br> 스위치(param) { <br> case "option":tw.pre = '<select multiple=" multiple">'; break; "<" 케이스 "link": tw.pre = 'fixbug<div>'; "<" < ;") ">"; <br> } <br> tw.post = "</" tw.reverse().join("></") ">"; <br> 🎜 > var reMultiTag = /<s*([w:] )/,//<li></li>,li와 같은 태그 쌍 또는 여러 태그 일치 <br> match = htmlStr.match( reMultiTag), <br> 태그 = match ? match[1].toLowerCase() : "";//<li,li <BR>로 확인됨 if(match && tagWrap[tag]){ <BR> var Wrap = tagWrap[tag]; <BR> div.innerHTML = Wrap.pre htmlStr Wrap.post; <BR> n = Wrap.length <BR> while(--n >= 0)//추가한 콘텐츠를 반환합니다. <br> div = div.lastChild; <br> }else{ <br> div.innerHTML = htmlStr; <br> } <br> // tbody를 자동으로 삽입하는 프로세스, 예를 들어 dom.parseHTML(' <thead></thead>') HTML 조각을 변환하면 <br> //'<thead></thead>'를 반환해야 하지만 IE는 '<thead></thead>를 반환합니다. <tbody> </tbody>' <br> //즉, return div.children.length는 표준 브라우저에서 1을 반환하고 IE는 2를 반환합니다. <br> if(dom.feature.autoInsertTbody && !! tagWrap[tag] ){ <br> var ownInsert = tagWrap[tag].join('').indexOf("tbody") !== -1,// <br> tbody = div.getElementsByTagName("tbody를 삽입했습니다. "), <br> autoInsert = tbody.length > 0;//<br> IE에서 삽입됨 if(!ownInsert && autoInsert){ <br> for(var i=0,n=tbody.length;i<n ;i ) { <BR> if(!tbody[i]. 🎜> } <BR> }<BR> if (dom.feature.autoRemoveBlank && /^s/.test(htmlStr) ) <BR> div.insertBefore( dom.doc.createTextNode(htmlStr.match(/^s*/)[0] ), div .firstChild ); <BR> if (fragment) { <BR> var firstChild <BR> while((firstChild = div.firstChild)){ // div의 노드를 문서 조각으로 전송합니다! <BR> fragment.appendChild(firstChild);
<BR><BR><BR>
<BR> 기본적으로는 그렇습니다. jQuery보다 훨씬 빠르게 실행되며, 코드 구현도 최소한 jQuery만큼 복잡하지는 않습니다. jQuery에는 네 가지 역방향 메서드도 있습니다. jQuery 구현은 다음과 같습니다. <BR>
</P><P></div></P><P>코드 복사</P><P><div class="codetitle"> 코드는 다음과 같습니다.<span><a style="CURSOR: pointer" data="79496" class="copybut" id="copybut79496" onclick="doCopy('code79496')"><U>jQuery.each({ </U>appendTo : "append ", </a> prependTo: "prepend", </span> insertBefore: "before", </div> insertAfter: "after", <div class="codebody" id="code79496"> replacementAll: "replaceWith"<BR>}, function(이름, 원본 ){ <BR> jQuery.fn[ name ] = function( selector ) {//Insert(html, 요소 노드, jQuery 객체) <BR> var ret = [], insert = jQuery( selector );//Convert insert into jQuery 객체 <BR> for ( var i = 0, l = insert.length; i < l; i ) { <BR> var elems = (i > 0 ? this.clone(true) : this).get( ) ; <br> jQuery.fn[ 원본].apply( jQuery(insert[i]), elems);//구현된 삽입 메서드 4개 호출 <br> > //체인 연산 코드가 분리되어 있지 않기 때문에 직접 구현해야 합니다.
<br><br><br>
<br>내 구현: <br>
<br><br><br><br><br>코드 복사<p></p>
</div> 코드는 다음과 같습니다.<p></p>dom.each({ <p>appendTo : 'append', </p>
<div class="codetitle"> prependTo: 'prepend', <span> insertBefore: 'before', <a style="CURSOR: pointer" data="46384" class="copybut" id="copybut46384" onclick="doCopy('code46384')"> insertAfter: 'after'<u>},function(method,name){ </u> dom.prototype[ 이름] = 함수(물건){ </a> return dom(물건)[메서드](this);
</span>
</div>
<div class="codebody" id="code46384">
<br>일반 코드가 제공되므로 누구나 필요한 것을 선택할 수 있습니다. <br>
</div></a></span></div></span></div>
</div>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="text_javascript 기술에 중점을 추가하는 JS 코드" href="http://m.php.cn/ko/faq/15528.html">text_javascript 기술에 중점을 추가하는 JS 코드</a></span><span>다음 기사：<a class="dBlack" title="text_javascript 기술에 중점을 추가하는 JS 코드" href="http://m.php.cn/ko/faq/15530.html">text_javascript 기술에 중점을 추가하는 JS 코드</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><p>집</p></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><p>강의</p></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/ko/login"><b class="icon5"></b><p>나의</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/ko/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/ko/"><b class="icon1"></b><span>집</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course.html"><b class="icon2"></b><span>강의</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/article.html"><b class="icon3"></b><span>기사</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/dic.html"><b class="icon6"></b><span>사전</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/course/type/99.html"><b class="icon7"></b><span>수동</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/xiazai/"><b class="icon8"></b><span>다운로드</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/ko/faq/zt" title="주제"><b class="icon12"></b><span>주제</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/ko/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/ko/" >집</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/article.html" class="hover">기사</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/course.html" >강의</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/faq/zt" >주제</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/xiazai" >다운로드</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/game" >게임</a></div><div class="swiper-slide"><a href="http://m.php.cn/ko/dic.html" >사전</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:setlang('de');" class="language course-right-orders chooselan " href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>