【日常】JS练习题（三）

实现一个表单，当光标聚焦在证件号码栏时， 提示输入18位的身份证号码

简单分析一下，当证件号码一栏onfocus时，在input后面追加一行“请输入18位的身份证号码”的红字提示。
即当input的onfocus事件被触发时，首先把之前追加的元素删除，然后重新在input后追加元素（在该td下追加子元素）。

首先来回顾一下有关追加、删除子元素的相关DOM方法

• 追加子元素

/*追加子元素*/

var idTip = document.getElementById("idcard");
// 获得节点的父元素
var parentNode = idTip.parentNode;
// 创建一个<p>节点
var newNode = document.createElement("p");
// 创建一个文本节点
var newTextNode = document.createTextNode("这是一个文本节点啦");

// 把新节点追加到父节点的子节点下 appendChid
parentNode.appendChild(newNode);

// 在指定节点前插入新节点 insertBefore
parentNode.insertBefore(newNode, idTip);

• 删除节点

/*删除节点*/

var idTip = document.getElementById("idcard");
var parentNode = idTip.parentNode;
// 创建新节点
var newNode = document.createElement("p");
// 给新节点的id赋值为tip
newNode.setAttribute("id","tip");
// 将新节点追加到父节点
parentNode.appendChild(newNode);
// 删除新节点
parentNode.removeChild(newNode);

现在有了以上的方法，就可以实现这道题目了。

// 具体html代码就不再赘述了

<tr>
	<td>身份证号码</td>
	<td colspan="2">
		<input type="text" name="idcard" id="idcard" onfocus="tipId()">
    </td>
 </tr>

function tipId() {
	// body...
	var idTip = document.getElementById("idcard");
	var parentNode = idTip.parentNode;
	var broNode = document.getElementById("tip");
	//alert(broNode);
	if(broNode){
		parentNode.removeChild(broNode);
	}
	var newNode = document.createElement("p");
	newNode.style.color = "red";
	newNode.style.fontSize = "15";
	newNode.style.display = "inline";
	newNode.innerHTML = "请输入18位身份证号码";
	newNode.setAttribute("id","tip");

	parentNode.appendChild(newNode);
}

一步一步成长~