diff options
Diffstat (limited to 'files/ko/web/api/element/insertadjacenthtml/index.html')
| -rw-r--r-- | files/ko/web/api/element/insertadjacenthtml/index.html | 79 |
1 files changed, 79 insertions, 0 deletions
diff --git a/files/ko/web/api/element/insertadjacenthtml/index.html b/files/ko/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..7b1cb1d4e5 --- /dev/null +++ b/files/ko/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,79 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>insertAdjacentHTML()</code></strong> 메서드는 HTML or XML 같은 특정 텍스트를 파싱하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가 한다. 이미 사용중인 element 는 다시 파싱하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므로 빠르다.</p> + +<h2 id="Syntax" name="Syntax">구문</h2> + +<pre><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<p><font face="Courier, Andale Mono, monospace">position은 아래 있는 단어만 사용 가능하다.</font></p> + +<dl> + <dt><code style="color: red;">'beforebegin'</code></dt> + <dd>element 앞에 </dd> + <dt><code style="color: green;">'afterbegin'</code></dt> + <dd>element 안에 가장 첫번째 child</dd> + <dt><code style="color: blue;">'beforeend'</code></dt> + <dd>element 안에 가장 마지막 child</dd> + <dt><code style="color: magenta;">'afterend'</code></dt> + <dd>element 뒤에</dd> +</dl> + +<p><code>text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고(html code), (DOM) tree에 삽입할 수 있다.</code></p> + +<h3 id="position_의_예시_그림">position 의 예시 그림</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> +<!-- <strong><code style="color: green;">afterbegin</code></strong> --> +foo +<!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Note:</strong> <code>beforebegin</code> , <code>afterend position은 element의 부모가 존재해야 하고, node가 tree 안에 있어야 한다.</code></div> + +<h2 id="Example" name="Example">예시</h2> + +<pre class="brush: js">// <div id="one">one</div> +var d1 = document.getElementById('one'); +d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); + +// At this point, the new structure is: +// <div id="one">one</div><div id="two">two</div></pre> + +<h2 id="Specification" name="Specification">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#insertadjacenthtml()', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">브라우저 호환성</h2> + +<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.appendChild()")}} ((position)beforeend 와 같은 효과를 갖는다.)</li> + <li><a class="external" href="http://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li> +</ul> |