잠시만 기다려 주세요

     '이태원 150명 넘게 죽은 핼러윈 참사.. 오세훈 탄핵.. 윤석열 탄핵.... 행안부 장관 이상민은 사람이냐... 말만 하면 책임 회피..'
전체검색 :  
이번주 로또 및 연금번호 발생!!   |  HOME   |  여기는?   |  바다물때표   |  알림 (16)  |  여러가지 팁 (1059)  |  추천 및 재미 (156)  |  자료실 (22)  |  
시사, 이슈, 칼럼, 평론, 비평 (613)  |  끄적거림 (136)  |  문예 창작 (716)  |  바람 따라 (75)  |  시나리오 (760)  |  드라마 대본 (248)  |  
살인!

    javascript/jquery

javascript/jquery - [JS] [innerHTML과 innerText의 사용]
이 름 : 바다아이   |   조회수 : 8219         짧은 주소 : https://www.bada-ie.com/su/?681591793131
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>


출처 : http://ellehu.com/javascript/2747
 
| |





      1 page / 3 page
번 호 카테고리 제 목 이름 조회수
76 javascript/jquery 스크롤해도 상단에 고정되는 메뉴 만들기, 스크롤 상단에 레이어 고정. 바다아이 7085
75 javascript/jquery 자바스크립트 스크롤을 문서 화면 상단, 하단으로 이동하기. 스크롤을 시작, 끝으로 이동하기 바다아이 5276
74 javascript/jquery javascript 서버시간 가져오기, 서버날짜 가져오기... 바다아이 7027
73 javascript/jquery 자바스크립트 쿠키 클래스, cookie class 바다아이 7590
72 javascript/jquery select 박스 3단 카테고리 바다아이 8551
71 javascript/jquery 자바스크립트 해당 년월의 마지막 날짜 구하기, 이번달 마지막 일 구하기... 바다아이 7937
70 javascript/jquery 자바스크립트 타임존 변환, timezone, 날짜, 시간 관련 편하게 작업하기... moment.js 바다아이 10169
69 javascript/jquery textarea 의 특정 커서 cursor 위치에 문자 삽입하기. focus, 커서 cursor 위치 구하기... 바다아이 10215
68 javascript/jquery 마우스 블럭(block) 선택한 텍스트 가져오기, 마우스로 웹페이지 본문 선택한 문자만큼 가져오기... 바다아이 8335
67 javascript/jquery textarea 특정 위치에 커서 cursor 를 옮기기, 위치시키기, focus 바다아이 11473
66 javascript/jquery jquery ajax option 옵션 총 정리.... 바다아이 8609
65 javascript/jquery jquery open api 개발, ajax JSONP cross domain 문제, 서로 다른 도메인 문제 해결하기, error 0 문제... sop 문제 바다아이 8367
64 javascript/jquery javascript 자바스크립트 소수점, 자리수, 반올림, 올림, 내림(버림) 바다아이 9239
63 javascript/jquery javascript 현재시각 표시하는 디지털 시계 만들기 (date 객체) 바다아이 9404
62 javascript/jquery CSS3 회전 속성과 javascript를 활용한 아날로그 시계 바다아이 10180
61 javascript/jquery javascript 자바스크립트 쿠키, cookie, 만들기, 저장, 삭제, 가져오기, 얻기 바다아이 9447
60 javascript/jquery javascript 자바스크립트 날짜 계산하는 다양한 방법 바다아이 10049
59 javascript/jquery 자바스크립트 javascript 한/영타 변환기, 한영, 한글, 영어 바다아이 13272
58 javascript/jquery url 인코드, 디코드, encode, decode 예제... 바다아이 8543
57 javascript/jquery javascript 자바스크립트 프레임 페이지 이동... frame location.href 바다아이 14083
56 javascript/jquery File Upload Progress, 파일 업로드 프로그레스바.... 업로드 진행바 구현. 바다아이 8994
55 javascript/jquery 자바스크립트 javascript, json 데이터 이쁘게 출력하기, json Highlight 바다아이 9142
54 javascript/jquery 자바스크립트 javascript json 사용하기, 출력하기, JSON.stringify, JSON.parse, 변환 바다아이 10449
53 javascript/jquery 자바스크립트 javascript innerHTML, innerTEXT 사용 할 때 주의할 점... 바다아이 9215
52 javascript/jquery 자바스크립트 javascript 엔티티 entity 인코딩, 디코딩, encode, decode 바다아이 9410
51 javascript/jquery 자바스크립트 javascript post, get 값 파라미터 받기, 구하기 바다아이 10705
50 javascript/jquery 자바스크립트 text copy, 복사, How to copy a TEXT to Clipboard on a Button-Click 바다아이 9498
49 javascript/jquery jquery autocomplete 자동완성 한글 입력시 문자, 검색어, 창 사라지는 문제. 바다아이 9077
48 javascript/jquery 자바스크립트 javascript, jquery, 검색어 자동완성 기능, autocomplete 바다아이 10071
47 javascript/jquery 자바스크립트 substring, substr, indexOf, lastIndexOf (javascript 문자열 자르기, 뒤에서 자르기, 찾기) 바다아이 9337
1
2
3
| |









Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천  실행시간 : 0.05459 초
to webmaster... gogo sea. gogo sea.