子节点的应用
Posted Mr_邓
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了子节点的应用相关的知识，希望对你有一定的参考价值。
创建一个新的节点：
1 <script type="text/javascript"> 2 var newNode=document.createElement("div"); 3 newNode.className="content"; 4 newNode.innerhtml="这是一个新创建的节点"; 5 </script>
?使用appendChild(node)将指定的节点追加到现有子节点的末尾。
1 <input type="button" value="添加" onclick="insertNode()" /> 2 <script type="text/javascript"> 3 var newNode=document.createElement("div"); 4 newNode.className="content"; 5 newNode.innerHTML="这是一个新创建的节点"; 6 function insertNode(){ 7 //增加body标签的子节点 8 document.body.appendChild(newNode); 9 } 10 </script>
制作一个猜数字的游戏：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 7 <title>猜数字游戏</title> 8 <style type="text/css"> 9 #title{ 10 margin: 0 auto; 11 position: relative; 12 left: 20px; 13 } 14 #result{ 15 height: 400px; 16 width: 600px; 17 margin: 0 auto; 18 border: 1px solid gray; 19 } 20 div{ 21 margin:0 auto; 22 margin-top:20px ; 23 height: 50px; 24 width: 400px; 25 } 26 </style> 27 <script src="js/caishuzi.js" type="text/javascript" charset="utf-8"></script> 28 29 </head> 30 <body onload="reload()"> 31 <div id="title"> 32 <h1>欢迎您参加测数字游戏</h1> 33 </div> 34 <div id="result"> 35 <div id="text0" class="txt"> 36 你的猜测结果是： 37 </div> 38 39 </div> 40 <div> 41 <span>请输入你猜测的数字：</span> 42 <input type="text" name="" id="number" value="" /> 43 <input type="button" id="btn1" value="确认" onclick="vertifyNum()"/> 44 </div> 45 </body> 46 </html>
//设定一个随机数 var testNum = Math.random(); testNum = Math.floor(testNum*100); //猜测的次数i var i = 1; //判断输出的数是否与设定的随机数相等， //1、若相等，输出“恭喜您，猜对了”，并将确认键变为不可用 //2、若不相等，输出“第i次猜测，猜测的数字偏大”/“第i次猜测，猜测的数字偏小” //3、当猜测的次数达到第五次，并且全部猜错时，输出“对不起您的机会已经用完了，欢迎下次再来” //并且使得确认键不可用 function vertifyNum () { //获取输入的数字，并赋值给num var num = document.getElementById("number").value; //获取添加内容所在的父节点 var obj = document.getElementById("result"); if(num == testNum){ //判断输入的数字num是否与设定的随机数testNum相等，若相等，输出"恭喜您，在第"+i+"次，您猜对了"，并使“确认键”不可用。 var newNode = document.createElement("div"); obj.appendChild(newNode); //将输出元素添加为提供输出位置的子节点 newNode.id = "text" + i; newNode.style.color = "firebrick" //输出字体的颜色 newNode.innerHTML = "恭喜您，在第"+i+"次，您猜对了"; document.getElementById("btn1").disabled = "disabled"; //使得“确认键”不可用 }else if (num > testNum) { var newNode = document.createElement("div"); //判断输入的数字num是否大于testNum，若是，输出“"对不起，您猜大了！您现在是第"+i+"次猜测错误了！"“ obj.appendChild(newNode); //将输出元素添加为提供输出位置的子节点 newNode.id = "text" + i; newNode.style.color = "red" newNode.innerHTML = "对不起，您猜大了！您现在是第"+i+"次猜测错误了！" if (i == 5) { //判断输出的次数是否为5，如果是，使得”确认键“不可用 document.getElementById("btn1").disabled = "disabled"; } i++; } else{ var newNode = document.createElement("div"); //判断输入的数字num是否大于testNum，若是，输出“"对不起，您猜小了！您现在是第"+i+"次猜测错误了！"“ obj.appendChild(newNode); //将输出元素添加为提供输出位置的子节点 newNode.id = "text" + i; newNode.style.color = "red" newNode.innerHTML = "对不起，您猜小了！您现在是第"+i+"次猜测错误了！" if (i == 5) { //判断输出的次数是否为5，如果是，使得”确认键“不可用 document.getElementById("btn1").disabled = "disabled"; } i++; } } //页面刷新时使得，页面回复 function reload () { document.getElementById("btn1").disabled = ""; i = 1; }
以上是关于子节点的应用的主要内容，如果未能解决你的问题，请参考以下文章
从外部片段内的 FragmentTabHost 的子片段添加新的选项菜单