차근차근/JAVA Script
innertHTML
[JS] [innerHTML과 innerText의 사용]
http://www.zetswing.com/bbs/board.php?bo_table=JS_TIP&wr_id=71
1.사용목적
id명이 붙는 태그로는 <div>와 <span>와 여러 태그가 있다. 솔직히 form필드들빼곤 거의 전부이며
form필드들은 value라는 속성이 있지만 id명을 갖는 태그는 inner와 outer을 씁니다.
이 태그안에 있는 내용을 html형식으로 아니면 text형식으로 가져오거나 아니면 이 태그안에 있는 내용을 다른 내용으로 html형식으로 바꿀지 아니면 text형식으로 교환할때 사용합니다. id명으로 제어하는 태그의 내용을 넣을때 위의 메소드를 사용합니다.물론 페이지 이동없이 실시간(동적)으로 내용이 변화하고 열고 닫는 태그여야 합니다. 단일태그는 안됩니다. 왜냐하면 열고 닫는 태그안에 내용을 가져오는것이기 때문입니다. 단일태그는 outerHTML이나 outText을 사용해도 됩니다.id명을 사용하는데 name값도 참조하지만 id명으로 하는게 맞습니다.
※활용예제:실시간 쪽지 확인등에 안보이는 iframe창에서 연산을 하다가 쪽지가 오면 해당 태그안에 왔다는 표시의 값을 넣어주는 것입니다.
2.사용방법
<script>
function
lee(){
alert(document.getElementById('here').innerText);
alert(document.getElementById('here').innerHTML);
alert(document.getElementById('here').outerText);
alert(document.getElementById('here').outerHTML);
document.getElementById('here').innerText="<b>sdfdsf</b>";
alert(here.innerText);
}
</script>
<div id='here'><B>DSFDS</B></div>
<input type="button" value="lee" onClick="lee();">
※id명을 참고할때는 id명.innewText해도 되지만 가독성을위해 정식 문법에 맞게 씁시다.
※반드시 id명이 있는 태그의 내용을 가져올때는 innerHTML와 innerText을 이용해야 한다.
innerHTML-
해당 태그는 포함안하며 값을 가져올때는 태그를 해석되지 않은 내용을 가져오며 값을 넣을때에는 태그를 해석하여 넣습니다.
innerText -
해당 태그는 포함안하며 값을 가져올때는 태그를 해석한 내용을 가져오며 값을 넣을때에는 태그를 해석하지 않고 넣습니다.
outerHTML -
해당 태그도 포함하며 위와 같습니다.
outerText -
innerText와 같습니다.
사실 id명을 참고할때는 document.all이나 document.getElementById를 사용안하고 id명.innerHTML등을 사용해도 됩니다. form필드들도 위와같이 사용이 가능하지만 form태그에 둘러싸인 태그들은 반드시 document.xx.xx 문법에 맞게 써줘야 합니다. form태그도 위와같이 사용이 가능하지만 name명을 참고하지말고 id명으로 참고해야 제대로된 값이 나옵니다. 다음과같이 document.form_id명.innerHTML 도 돼고 form_id명.innerHTML으로 해도 됩니다.
3.예제
기본 사용예제
사용예시1
테이블 안에 있는 바보라는 문자를 천재로 바꾸어 보겠습니다.
<script language="javascript">
function
change_tag()
{
document.all.txt.innerHTML="천재" //
해당 아이디를 가진
//태그의 안쪽 내용을
//바꾸는
소스
}
</script>
<table>
<tr>
<td id=txt>바보</td>
</tr>
</table>
<input
type=button value="테이블안에 있는 문자바꾸기" onClick="change_tag()">
사용예시2
<script
language="javascript">
function Test()
{
kk1.outerText="";
}
</script>
<a
href="javascript:Test()">테스트하기</a>
<table
border="1">
<tr>
<td id='kk1'>이름</td>
<td
id="kk2">나이</td>
</tr>
</table>
사용예시3
<input
type='button' value="실험하기" onclick="kk1.outerText='';">
<table
border=1>
<tr>
<td id=kk1>이름</td>
<td
id=kk2>나이</td>
</tr>
</table>
사용예시4
<script>
function
show_div_change(lay)
{
if(this.prev_lay){
document.getElementById(this.prev_lay).style.display="none";
document.getElementById(lay).style.display="";
//=document.all.lay와 같다. 호환성이
좋다.
}else{
document.getElementById(lay).style.display="";
}
this.prev_lay=lay;
}
</script>
<!--문서 로드 후 보여줄
레이어를 선택-->
<body
onload="show_div_change('divTab1')">
<!--탭버튼에
의한 레이어 선택-->
<input
type="button" value="▒여행▒" onclick="show_div_change('divTab1')">
<input type="button" value="▒호텔▒"
onclick="show_div_change('divTab2')">
<input type="button" value="▒음식▒"
onclick="show_div_change('divTab3')">
<input type="button" value="▒미용▒"
onclick="show_div_change('divTab4')">
<!--4개의
div그룹을 생성하고 모두 display을 none시킨다.-->
<div id="divTab1"
style="width:317px;height:300px;border: 2 dotted; display:none">
여행 정보
입니다.<br>김치찌개<br>해물잡탕
</div>
<div id="divTab2"
style="width:317px;height:300px;border: 2 dotted; display:none">
호텔 정보
입니다.<br>김치찌개<br>해물잡탕
</div>
<div id="divTab3"
style="width:317px;height:300px;border: 2 dotted; display:none">
음식 정보
입니다.<br>김치찌개<br>해물잡탕
</div>
<div id="divTab4"
style="width:317px;height:300px;border: 2 dotted; display:none">
미용 정보
입니다.<br>김치찌개<br>해물잡탕
</div>
폼메일 양식 통째로 보내기
-다음은 메일보내는 페이지에 form의 내용을 입력당시에 내용을 통채로 보내서 아무가공없이 그대로 메일에 넣어서 보내는겁니다. 별다른 가공처리가 필요없습니다.-
<script>
function
checkForm(form){
//form은 하단의 form의 name을 지시하는 document.form_name으로 받습니다.
//form필드들은 name값으로 받지만 그외의 태그는 id명으로 받습니다.
form.mailBody.value
= form.innerHTML;
return true;
}
</script>
<form
action="test1.php" method="post" onsubmit="return checkForm(this);">
<!--this는 현재 태그를 가리키는 document.현재태그의이름 형식으로 넘겨줍니다.-->
<input
type="hidden"
name="mailBody">
견적요청
<table>
<tr><td>성명</td><td><input
type="text"
name="m_name"></td></tr>
<tr><td>메일</td><td><input
type="text"
name="m_mail"></td></tr>
<tr><td>내용</td><td><input
type="text" name="m_content"></td></tr>
<tr><td
colspan="2"><input type=submit><input
type=reset></td></tr>
</table>
</form>
marquee을 이용한 innerHTML과 innerText 예제
<HTML><HEAD>
<TITLE>
innertext와 innerhtml</TITLE>
<scRIPT
LANGUAGE="Javascript">
<!--
function texttest(){
//m이라는
marquee개체의 innerText속성에"
document.all.m.innerText="<font
color=\"red\">월드컵코리아</font>";
}
function
htmltest(){
m.innerHTML="<font
color=\"red\">월드컵코리아</font>";
}
function
control(v){
document.all.m.direction=v;
}
//-->
</scRIPT></HEAD>
<BODY>
<marquee
width="450" height="400" style="background-Color:yellow;colord:red"
direction="down" Scrolldelay=30 id="m"> 마퀴태구..
</marquee><p>
<span style="cursor:hand"
onclick="texttest()">[innerText]</span>
<span style="cursor:hand"
onclick="htmltest()">[innerHTML]</span><p>
<span
style="cursor:hand; border-style:solid; border-width:1px;
background-Color:#cccccc; padding:10px"
onclick="control(this.innerText)">up</span>
<span
style="cursor:hand; border-style:solid; border-width:1px;
background-Color:#cccccc; padding:5px"
onclick="control(this.innerText)">down</span>
<span
style="cursor:hand; border-style:solid; border-width:1px;
background-Color:#cccccc; padding:5px"
onclick="control(this.innerText)">left</span>
<span
style="cursor:hand; border-style:solid; border-width:1px;
background-Color:#cccccc; padding:5px"
onclick="control(this.innerText)">right</span>
</BODY>
</HTML>
[javaScript] div태그와 span태그 비교/ innerHTML예제
|
|
[javaScript] div태그와 span태그
*<span>태그 : "문장 단위로 텍스트 영역을 지정하는것"
<span>단어</span>단어
결과> 단어단어
*<div>태그 : "문단 단위로 영역을 지정"
<div>단어</div>단어
결과> 단어
단어
innerHTML
개체의 시작태그와 종료 태그사이에 있는 html을 나타내는 속성으로 block element에만 적용되면 시작 태그와 종료태그 모두를 포함하지 않는 요소는 innerHTML 속성을 가질수없으며 text와 element를 포함하 유효한 String이어야 한다.
object.innerHTML [ = HTML형식의 문자열 ]
-
<html>
-
<head>
-
<title> New Document </title>
-
<style>
-
.div{width:200px;height:100px; background-color:pink}
-
.a{border:double red 5px}
-
#b{background-color:red ; color:white ; border:inset 20px pink}
-
</style>
-
-
<script>
-
function Check(index){
-
switch(index){
-
case 1 :
-
//div태그를 찾기
-
var divEle = document.getElementById("div");
-
//div태그 영역에 데이터삽입
-
//divEle.innerHTML ="오늘은 날씨가 흐리네요^^";
-
-
//div태그영역안에 다른 element삽입
-
//divEle.innerHTML="<h3>즐거운 하루되세요</h3>";
-
divEle.innerHTML="<img src='img/kim.jpg'/>";
-
break;
-
case 2 :
-
var hEle = document.getElementById("h3");
-
hEle.innerHTML="스타일 적용해보자";
-
//hEle.className="a";// 스타일 .a를 적용
-
hEle.id = "b"; //스타일 #b를 적용
-
break;
-
-
}
-
-
}//Check함수끝
-
-
</script>
-
-
</head>
-
-
<body>
-
<h2>document.getElementById() 와 innerHTML 예제</h2>
-
<div id="div" class="div"></div>
-
-
<h3 id="h3">내용바꾸기</h3>
-
<hr color="red">
-
-
<form>
-
<input type="button" value="div적용" onclick="Check(1)"/>
-
<input type="button" value="h3적용" onclick="Check(2)"/>
-
</form>
-
-
<h2>div와 span의 차이점</h2>
-
<hr color="red"/>
-
안녕<div style="background:pink"> div </div> Hi
-
-
<hr color="red"/>
-
안녕<span style="background:pink"> span </span> Hi
-
</body>
-
</html>
버튼을 누르기전
버튼을
눌렀을때
jquery API 정복 - innerHTML 과 같은 표현, html()
http://findfun.tistory.com/159
.html()
원문
링크 
http://api.jquery.com/html/
함수들
html()
- .html()
html( htmlString )
- .html( htmlString )
- .html( funtion(index, oldhtml) )
.html()Returns : String
개요 : 일치하는 요소 내부의 html을 문자열로 반환한다.
- .html()
html() 함수는 XML 문서에는 사용할 수 없습니다.
HTML 문서에서 어떤 요소의 내부 내용을 알아내고자 할때 html() 함수를 사용할 수 있습니다. 만일 선택자에 의해 선택된 요소가 복수개일 경우 제일 처음 요소의 값만 취합니다. 아래 예제를 보도록 하죠.
이 구문은 div 태그들중 demo-container 라는 클래스명을 가지고 있는 첫번째 요소를 선택하여 그 안의 내용을 가져오게 됩니다. 만약 아래와 같이 html 구조가 되어있다면
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>결과는 아래와 같이 됩니다.
이 메소드는 브라우져의 innerHTML 속성을 이용한 것입니다. 때로는 원본 문서의 html이 정확하게 복제되지 않기도 합니다. 예를 들어, Internet Explorer 는 속성값에 숫자형 문자가포함되어 있을때 주위에 따옴표를 붙이기도 합니다.(라고 하는데요 정확한 번역이 아닐수도 있습니다. 직접해봐야 겠지만 말이죠.)
예
제
클릭하면
html 소스를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<p>
<b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
to a <span id="text">text</span> node.
</p>
<p>
This <button name="nada">button</button> does nothing.
</p>
<script>
$("p").click(function () {
var htmlStr = $(this).html();
$(this).text(htmlStr);
});
</script>
</body>
</html>미리보기
클릭해보세요. 그 화면을 구성하고 있는 html을 보실 수 있습니다. 계속 클릭해도 뭔가를 계속 바꿔줍니다.
.html( htmlString )Returns : jQuery
개요 : 일치하는 요소 내부에 새로운 html 문자열을 추가한다.
- .html( htmlString )
- htmlString 새로 추가될 html 소스
- .html( function(index, oldhtml) )
- function(index, oldhtml) 이 함수는 새로 추가될 html을 반환합니다. 기존의 html을 인자로 받아서 index에 해당하는 위치에
html() 함수는 XML 문서에는 사용할 수 없습니다.
.html() 함수를 내용을 추가하는 용도로 사용하면 그 요소안의 내용은 새로운 요소로 완전히 바뀌게 됩니다. 아래 예제를 보시죠.
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div><div class="demo-container"> 요소 안의 내용을 바꾸기 위해서는 아래와 같이 하면 됩니다.
$('div.demo-container')
.html('<p>All new content. <em>You bet!</em></p>');jQuery 1.4 버젼에 와서 .html() 함수는 HTML 내용을 바꾸기 위해서 함수를 사용할 수 있게 되었습니다.
$('div.demo-container').html(function() {
var emph = '<em>' + $('p').length + ' paragraphs!</em>';
return '<p>All new content for ' + emph + '</p>';
});만약 문서상에 p 태그가 6개가 있다면 위 예제는 <div class="demo-container"> 요소 안에 <p>All new content for <em>6 paragraphs!</em></p> 라는 새로운 html 을 추가하게 됩니다.
이 함수는 브라우져의 기본 함수인 innerHTML을 이용한 것입니다. 그런데 어떤 브라우져에서는 이 함수가 정확하게 적용되지 않기도 합니다. 예를 들어 IE8 이전의 브라우져에서는 href 속성의 URL을 완벽히 지원하는 데 반해 IE9 이전 버젼의 브라우져(IE8이라고 표현안했네요.)에서는 호환 레이어(compatibility layer)가 추가되지 않은 HTML5 다루는 것이 항상 정확하지는 않습니다.(음.. IE8이전은 잘 작동하는데 IE8버젼은 HTML5가 정확히 지원이 되지 않아 원하는데로 작동이 잘 안될 수도 있다는 얘기인 것 같습니다. 신빙성 없으니 원본을 보시는 편이 더 좋으실 듯 합니다. ^^;;;)
예
제
div
태그안에 html 소스를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.red { color:red; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<span>Hello</span>
<div></div>
<div></div>
<div></div>
<script>$("div").html("<span class='red'>Hello <b>Again</b></span>");</script>
</body>
</html>
미리보기
Hello Again 이라는 빨간 텍스트가 추가되었습니다.
예
제
html()함수로
html을 추가한 뒤, append() 함수를 사용해 느낌표를 더 추가합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<script>
$("div").html("<b>Wow!</b> Such excitement...");
$("div b").append(document.createTextNode("!!!"))
.css("color", "red");
</script>
</body>
</html>
미리보기
html() 함수에는 원래 느낌표가 하나인데 append() 함수를 사용해서 빨간색 느낌표를 추가된 것을 보실수 있습니다.
innerHTML 과 대동소이한 함수입니다. innerHTML 을 사용하셔도 좋고 html() 함수를 사용하셔도 크게 다를 건 없겠네요. 단 jQuery 객체에서는 innerHTML 사용이 되지 않으니 사용하기 위해 일반 자바스크립트 변수를 사용해야 하는 부분은 있어 보입니다. 걍~ html() 함수 쓰시라는 얘기와 별반 다를게 없네요. 하하하;;;
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'차근차근 > JAVA Script' 카테고리의 다른 글
| 중첩함수 / 클로저 (0) | 2014.07.29 |
|---|---|
| <input type="text"> (0) | 2014.07.29 |
| [INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다. (0) | 2014.07.29 |
| innerHtml , jsp 변숫값 자바스크립트에서 가져올 때 갱신하기 (0) | 2014.07.29 |
| 자바스크립트변수 jsp에서 사용 (3) | 2014.07.29 |
'차근차근/JAVA Script'의 다른글
- 현재글innertHTML