자바 스크립트로 동적으로 HTML 콘텐츠/요소 만들기

로그인 페이지를 만들려고합니다. 첫 번째 텍스트 상자 (사용자 이름) 밖으로 탭하면 암호 입력 전에 입력 된 텍스트를 기반으로 일부 정보가 페이지에 표시됩니다. 지금은 onblur 이벤트를 사용하여 표시 할 항목을 얻는 데 문제가 있습니다. 여기까지 내가 지금까지 가지고있는 것이있다.자바 스크립트로 동적으로 HTML 콘텐츠/요소 만들기

<script type='text/javascript' language="javascript"> 
function createDiv() 
{ 
var divTag = document.createElement("div"); 
divTag.style.position = "absolute"; 
divTag.style.top = "150px"; 
divTag.style.left = "450px"; 
divTag.style.zIndex = "20"; 
divTag.innerHTML = "This is information"; 
document.getElementByID('card').appendChild(divTag); 
} 
</script> 

<body onload='init();'> 
<div id="card" style="width:800px; z-index:10; height:600px; position:relative; margin-left:auto; margin-right:auto; text-align:center; margin-top:0px; background-image:url('customLoginBG.png'); background-repeat:no-repeat;"> 
<form method='post' action='/login'> 
<ul style="list-style-type:none;"> 
<li> <input type='hidden' id='token' name='token' /> </li> 
<li style="position:absolute; top:270px; left:260px;"> <input type='text' onblur="createDiv()" id='username' style="width:188px; height:27px; background-image:url('inputBar.png');" /> </li> 
<li style="position:absolute; top:310px; left:260px;"> <input type='password' id='password' style="width:188px; height:27px; background-image:url('inputBar.png');" /> </li> 
<li style="position:absolute; top:290px; left:455px;"> <input type='image' src="loginButton.png" value="Login" onclick='doLogin();' /> </li>   
</ul> 
</form> 
</div> 
</body>

의견이나 제안이 있으십니까? 단지 onblur를 표시하는 데 도움이되는 것이 좋습니다.

출처

2012-09-05 user1612226

코드에서이 onblur 이벤트는 어디에 있습니까? 추신. 인라인 스타일보다는 스타일 시트를 사용하는 방법을 배웁니다. –

그것은 당신의 경우 document.getElementById()하지 document.getElementByID()

입니다 : (실제로는 질문 이상)을

// doesn't work 
document.getElementByID('card').appendChild(divTag); 
// works as expected 
document.getElementById('card').appendChild(divTag);

출처

2012-09-05 13:03:22 WTK

-4

한 가지 제안 : 바닐라 JS 다른 생산성 라이브러리 jQuery를 여부와 그 이유는 무엇입니까?

출처

2012-09-05 13:07:27

댓글이어야합니다. – devundef

자바 스크립트로 동적으로 HTML 콘텐츠/요소 만들기

답변

관련 문제