javascript

Hagi 2010. 4. 30. 15:49

동적 html - inner 시리즈(innerText , outerText , innerHTML , outerHTML)

(예)<p id="myid">Here is some <b id="yourid">interesting</b> text</p>

<위의 예를 myid라는 id로 가져와서 결과를 출력>

innerText , outerText => 태그를 제외한 텍스트를 가져온다. 사실 둘의 차이점은 잘모르겠다(몰라도...별상관없을듯) : (결과) Here is some interesting text

innerHTML => 자신을 둘러싼 태그는 빼고 그 안의 내용만 가져옴 :

(결과) Here is some <b id="yourid">interesting</b> text

outerHTML => 자신을 둘러싼 태그 포함해서 내용도 가져옴 :

(결과) <p id="myid">Here is some <b id="yourid">interesting</b> text</p>


=> out 이 들어가는 것은 지정한 태그 내용을 몽땅 가져와서 바꿀수 있다. 그래서 아래 예제에서 testCase2 tsetCase4에서 outerText와 outerHTML은 javascript null 오류가 난다.


여기서 내린 결론은...

out 은 태그를 몽땅 갈아엎을 때쓴다.

in   은 태그내에 무엇인가 삽입할 때 쓴다.

그래서 보통 span이나 div등으로 innerHTML을 써서 span이나 div내에 태그를 삽입하곤한다.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
<script language="JavaScript">
var chg_val = "<b>n nbsp; e nbsp; w <br> text <b/>";
function testCase1(){
    alert("origin : "+document.all['myid'].innerText); // shows 'Here is some interesting text'
    document.all['myid'].innerText = chg_val;
    alert("change : "+document.all['myid'].innerText); // shows 'Here is some interesting text'
}
function testCase2(){
    alert("origin : "+document.all['myid'].outerText); // shows 'Here is some interesting text'
    document.all['myid'].outerText = chg_val;
    alert("change : "+document.all['myid'].outerText); // shows 'Here is some interesting text'
}
function testCase3(){
    alert("origin : "+document.all['myid'].innerHTML); // shows 'Here is some <b>interesting</b> text'
    document.all['myid'].innerHTML = chg_val;
    alert("change : "+document.all['myid'].innerHTML); // shows 'Here is some <b>interesting</b> text'
}
function testCase4(){
    alert("origin : "+document.all['myid'].outerHTML); // shows '<p id="myid">Here is some <b>interesting</b> text</p>'
    document.all['myid'].outerHTML = chg_val;
    alert("change : "+document.all['myid'].outerHTML); // shows '<p id="myid">Here is some <b>interesting</b> text</p>'
}
</script>

 </HEAD>

 <BODY>
  <p id="myid">Here is some <b id="yourid">interesting</b> text</p>
  <input type="button" value="innerText" onclick="testCase1()"/>
  <input type="button" value="outerText" onclick="testCase2()"/>
  <input type="button" value="innerHTML" onclick="testCase3()"/>
  <input type="button" value="outerHTML" onclick="testCase4()"/>
 </BODY>
</HTML>


참고 : http://www.irt.org/script/1370.htm

 
 
 

javascript

Hagi 2010. 4. 29. 09:00
naver지식검색 - scriptwin 님의 답변



<html>
<head>
<script type="text/javascript" language="javascript">

  function testChange(obj){
   alert("돌아가라~포커스야~제발좀~");
   setTimeout(function(){
    obj.focus();
   });

 }

</script>
</head>


<body>
  <form name=happy>
  <table>
   <tr>
    <td>
     <input type="text" id="t1" name="d1" width="100" onchange="testChange(this)">
     <input type="text" id="t2" name="d2" width="100">
    </td>
   </tr>
  </table>
  </form>
</body>
</html>


 
 
 

javascript

Hagi 2009. 9. 13. 17:49

<Before> 

 

 <After>

 

 

아이디 생성하는 텍스트 입력하는 곳을 클릭하면, 아이디 생성에 대한 설명이 나오고... 다른 곳을 클릭하면 없어지는 것이 참 깔끔하게 느껴진다.

 

=============================================================================================================================

function displayspanName(){
 var setInputName = document.getElementById("spaninputName");
 setInputName.style.display = "block";
}

------------------------------------

<body>
<form name="frmRegist" method="post" action="regist_process.jsp" onsubmit="return checkIt(this)">
<table align="center" border="1" width="600">
 <col width="150">
  <tr>
     <td>아이디 </td>
     <td>
         <input type="text" id="userId" name="userId" size="30" maxlength="20" value="" onfocus="displayspanName()"/>
         <span id="spaninputName" style="display: none">
         <br/>
           당신의 멋진 이름은 21자 내로 입력하세요.
          </span>
      </td>
 </tr>

--------------------중략------------------------------------

 

 <After> 

  <Before>

 

 

야후 Japan 가입양식 보기

 

yahoojp.html

 

- 첨부파일

yahoojp.html