환영합니다. 바다아이 홈페이지 입니다.

'민주당이 분열되어야 정치개혁이 시작된다.'

이번주 로또 및 연금번호 발생!! |

HOME |

여기는? |

바다물때표 |

알림 (16) |

여러가지 팁 (1059) |

추천 및 재미 (156) |

자료실 (22) |

시사, 이슈, 칼럼, 평론, 비평 (613) |

끄적거림 (136) |

문예 창작 (716) |

바람 따라 (75) |

시나리오 (760) |

드라마 대본 (248) |

살인!

리눅스 데스크탑 (230)
리눅스 서버 (148)
윈도우 관련 (8)
freebsd 데스크탑 (31)
freebsd 서버 (34)
쉘 스크립트 (6)
html/css/xml (48)
html5 (4)
golang (179)
php (2)
디자인 관련 (1)
javascript/jquery (76)
DATABASE (9)
mariadb, mysql (33)
postgresql (45)
생활/쇼핑 (39)
컴퓨터/핸드폰 (45)
종교/자선 (3)
요리관련 (22)
음식관련 (15)
의학관련 (8)
건강/운동 관련 (13)
주식, 금융관련 (3)
자동차, 운전 관련 (21)
기계 관련 (9)
스포츠 관련 (1)
과학, 수학관련 (1)
문학관련 (8)
좋은 글 (7)
낚시관련 (1)
원예관련 (9)

현재 접속자

바다아이에게 후원하기

개정 공동번역 성경보기

기존 공동번역 성경보기

소스 하이라이팅

도로명 주소검색

URL encode, decode

javascript 줄 맞추기

Hits :

javascript/jquery

javascript/jquery - 자바스크립트 javascript innerHTML, innerTEXT 사용 할 때 주의할 점...

이 름 : 바다아이 | 조회수 : 9233

Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: white;
  color: black;
}

.hljs-comment,
.hljs-quote {
  color: #800;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-title,
.hljs-name {
  color: #008;
}

.hljs-variable,
.hljs-template-variable {
  color: #660;
}

.hljs-string,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-regexp {
  color: #080;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-meta,
.hljs-number,
.hljs-link {
  color: #066;
}

.hljs-title,
.hljs-doctag,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
  color: #606;
}

.hljs-attribute,
.hljs-subst {
  color: #000;
}

.hljs-formula {
  background-color: #eee;
  font-style: italic;
}

.hljs-selector-id,
.hljs-selector-class {
  color: #9B703F
}

.hljs-addition {
  background-color: #baeeba;
}

.hljs-deletion {
  background-color: #ffc8bd;
}

.hljs-doctag,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
 font-style: italic;
}
</style>
<pre>
<code class="hljs">innerHTML 사용할때 주의 하실 것이 있습니다.
id 레이어보다 &lt;script&gt;&lt;/script&gt; 가 위에 있고 
getElementById 으로 id 를 끌어올 때
그 안에 바로 innerHTML 을 쓴다면 id 를 null 로 인식합니다.

반드시 id 레이어가 오고 그 다음에 스크립트가 나와야 합니다. 페이지가 다 로딩 되어야 id 를 인식을 하죠...
만약 이걸 피하고 싶다면 function 으로 만들어서 사용 하시면 됩니다.
html 이 다 해석되고 id 레이어가 있다고 인식이 되어야 null 값으로 인식을 하지 않습니다.

문제의 코드 (null 이 와서 제대로 작동이 안됩니다.)

&lt;script LANGUAGE=&quot;Javascript&quot;&gt;
var kk = document.getElementById(&quot;idman&quot;);
kk.innerHTML = &quot;&lt;font color=&#39;red&#39;&gt;ddd&lt;/font&gt;&quot;;
&lt;/script&gt;

&lt;div id=&quot;idman&quot;&gt;&lt;/div&gt;

제대로 작동이 됩니다.

&lt;script LANGUAGE=&quot;Javascript&quot;&gt; 
var kk = document.getElementById(&quot;idman&quot;); 
kk.innerHTML = &quot;&lt;font color=&#39;red&#39;&gt;ddd&lt;/font&gt;&quot;; 
&lt;/script&gt;

피하려면 function 으로 만들어서 아래처럼 하시면 됩니다.

&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;

&lt;script LANGUAGE=&quot;Javascript&quot;&gt;
function aa() {
	var kk = document.getElementById(&quot;idman&quot;);
	kk.innerHTML = &quot;&lt;font color=&#39;red&#39;&gt;ddd&lt;/font&gt;&quot;;
}
&lt;/script&gt;

&lt;input type=&quot;button&quot; value=&quot;눌러&quot; onclick=&quot;aa();&quot;&gt;
&lt;div id=&quot;idman&quot;&gt;&lt;/div&gt;

p.s
혹시 고생하시는 분들 있을까 해서 올려 놓습니다.
무의식적으로 차이를 이해하지 못하고 엄한 곳에서 문제를 찾을 때가 있습니다.

</code>
</pre>

짧은 주소 : https://www.bada-ie.com/su/?601591779836

innerHTML 사용할때 주의 하실 것이 있습니다.
id 레이어보다 <script></script> 가 위에 있고 
getElementById 으로 id 를 끌어올 때
그 안에 바로 innerHTML 을 쓴다면 id 를 null 로 인식합니다.

반드시 id 레이어가 오고 그 다음에 스크립트가 나와야 합니다. 페이지가 다 로딩 되어야 id 를 인식을 하죠...
만약 이걸 피하고 싶다면 function 으로 만들어서 사용 하시면 됩니다.
html 이 다 해석되고 id 레이어가 있다고 인식이 되어야 null 값으로 인식을 하지 않습니다.


문제의 코드 (null 이 와서 제대로 작동이 안됩니다.)


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script  LANGUAGE="Javascript">
var kk = document.getElementById("idman");
kk.innerHTML = "<font color='red'>ddd</font>";
</script>

<div id="idman"></div>


제대로 작동이 됩니다. 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<div id="idman"></div> 

<script LANGUAGE="Javascript"> 
var kk = document.getElementById("idman"); 
kk.innerHTML = "<font color='red'>ddd</font>"; 
</script>


피하려면 function 으로 만들어서 아래처럼 하시면 됩니다.


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script  LANGUAGE="Javascript">
function aa() {
	var kk = document.getElementById("idman");
	kk.innerHTML = "<font color='red'>ddd</font>";
}
</script>

<input type="button" value="눌러" onclick="aa();">
<div id="idman"></div>


p.s
혹시 고생하시는 분들 있을까 해서 올려 놓습니다.
무의식적으로 차이를 이해하지 못하고 엄한 곳에서 문제를 찾을 때가 있습니다.

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

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