使用 javascript 动态创建 html 内容/元素答案

【问题标题】：Creating html content/element dynamically with javascript使用 javascript 动态创建 html 内容/元素
【发布时间】：2012-08-30 04:58:09
【问题描述】：

我正在尝试构建一个登录页面。当您跳出第一个文本框（用户名）时，我希望页面在输入密码之前根据输入的文本显示一些信息。现在，我无法使用 onblur 事件显示任何内容。这是我目前所拥有的。

<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 将是一个好的开始。

【问题讨论】：

你的代码中这个 onblur 事件在哪里？附：学习使用样式表而不是内联样式。

标签： javascript html dynamic onblur createelement

【解决方案1】：

这是document.getElementById() 不是document.getElementByID()

在你的情况下：

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

【讨论】：

【解决方案2】：

一个建议，（实际上更多的是一个问题）：为什么是 vanilla js 而不是 jquery 或任何其他生产力库？

【讨论】：