이 글은 편집 검토가 필요합니다. 도울을 줄 수 있는 방법을 살펴보세요.
현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
Element.innerHTML 프로퍼티는 HTML구문의 하위 노드들을 가져오거나, 설정한다.
<div>, <span>, 또는 <noembed> 노드가 (&), (<), (>) 문자를 포함하는 텍스트 노드를 가지고 있다면 innerHTML은 이러한 문자들을 &, <, >로 대체한다. 정확한 복사를 원한다면 Node.textContent 를 사용하면 된다.Syntax
var content = element.innerHTML;
content변수가 return 받는 값은, element의 모든 하위 노드를 설명하는 직렬화된 HTML 코드이다.
element.innerHTML = content;
element의 모든 자식들(하위노드, 즉HTML 코드들)을 제거한다. content의 문자열을 파싱하고, 생성 된 노드를 element의 자식으로 할당한다.
Example
<html>
<head></head>
<body>
<div id="txt">
<script id="txt0"> x=0> </script>
<noembed id="txt1"> 1 </noembed>
<noframes id="txt2"> 2 </noframes>
<noscript id="txt3"> 3 </noscript>
<div id="txt4"> 4 </div>
<div>
<noscript id="txt5"> 5 </noscript>
</div>
<span id="txt6"> 6 </span>
</div>
<div id="innerHTMLtxt"></div>
<div id="textContenttxt"><div>
<script>
for (i=0;i<7;i++){
x="txt"+i;
document.getElementById(x).firstChild.nodeValue='&<>'
}
document.getElementById("innerHTMLtxt").textContent=document.getElementById("txt").innerHTML
document.getElementById("textContenttxt").textContent=document.getElementById("txt").textContent
</script>
<body>
</html>
// HTML:
// <div id="d"><p>Content</p>
// <p>Further Elaborated</p>
// </div>
d = document.getElementById("d");
dump(d.innerHTML);
// the string "<p>Content</p><p>Further Elaborated</p>"
// is dumped to the console window
Notes
이 프로퍼티는 element의 내용을 완전히 대체하는 간단한 방법을 제공한다. 예를 들면, 문서 본문의 전체 내용을 삭제할 수 있다:
document.body.innerHTML = ""; // Replaces body content with an empty string.
innerHTML 프로퍼티는 많은 종류의 element-<body>와 <html>을 포함해서-들을 반환하거나 대체할 수 있다. 또한 동적으로 수정된 페이지의 소스를 보는데 사용할 수 있다.
// Copy and paste into address bar as a single line javascript:"<pre>"+document.documentElement.innerHTML.replace(/</g,"<") + "</pre>";
이 프로퍼티는 웹 브라우저에 의해 최초로 도입되었고, HTML5에서 WHATWG와 W3C에 의해 특정되었다. 이전 도입은 정확히 동일한 방법으로 구현되지 않을 수 있다. 예를 들면 텍스트가 입력되었을 때 IE(인터넷 익스플로러)는 innerHTML 프로퍼티 값(value) 속성을 바꾸지만, Gecko 브라우저의 프로퍼티는 그렇지 않다.
Security considerations
웹 페이지에서 텍스트를 삽입하기 위해 innerHTML을 사용하는 것은 종종 볼 수 있다. 이것은 보안 문제를 발생시킬 수 있다.
var name = "John";
// assuming el is an HTML DOM element
el.innerHTML = name; // harmless in this case
// ...
name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case
비록 이것이 cross-site scripting 어택 처럼 보일 수 있지만 결과는 무해하다. HTML5에서 innserHTML로 삽입된 <script> 코드는 실행되지 않는다.
그러나 <script> elements 를 사용하지 않고 JavaScript를 실행하는 방법이 있다. 그러므로 여전히 innerHTML을 사용해서 문자열을 설정할 때 통제할 수 없는 보안 위험이 있다. 예를 들어:
var name = "<img src=x onerror=alert(1)>"; el.innerHTML = name; // shows the alert
그 때문에 plain text를 사입할 때 innerHTML을 사용하는 것은 궈장하지 않는다. 대신 node.textContent를 사용한다. 이것은 HTML로 전달된 내용을 해석하지 않는다. 대신 raw text로 삽입한다.
Specification
| Specification | Status | Comment |
|---|---|---|
| DOM Parsing and Serialization The definition of 'Element.innerHTML' in that specification. |
Working Draft |
See also
innerDOM- For those wishing to adhere to standards, here is one set of JavaScript functions offering to serialize or parse XML so as to set element contents defined as string(s) via the DOM or getting element contents obtained from the DOM as a string.- insertAdjacentHTML - 교체 대신에 새로운 HTML(code)을 추가할 수 있는 innerHTML의 대안.
- jssaxparser - A more robust (though heavier) solution than innerDOM (supports parsing with namespaces, single-quoted attributes, CDATA sections, etc.) is this SAX2 parser when used with its DOM content handler. (Offers String to DOM; DOM to String is significantly easier)
- Efficiency considerations: On quirksmode
- MSDN: innerHTML Property