JavaScript中的dom添加节点，innerHTML和事件，验证用户名密码对条件判断

最新推荐文章于 2024-05-10 10:18:38 发布
最新推荐文章于 2024-05-10 10:18:38 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： 前端 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26925297/article/details/79888856
版权

（1）dom添加节点




示例：

<body>


   <ol>
     <li>周星驰</li>
     <li>张学友</li>
     <li>刘德华</li>
   </ol>
   <input type="button" οnclick="addNode()" value="添加张家辉" >


</body>
<script type="text/javascript">
   
   function addNode(){
  //获得ol标签中的第一个
  var ol=document.getElementsByTagName("ol")[0];
  //在ol下创建li
  var li=document.createElement("li");
  var text=document.createTextNode("张家辉");
  //将文本挂在li下
  li.appendChild(text);
  //将li挂在ol上
  ol.appendChild(li);
   }
 
</script>



(2)innerHTML事件



示例1：



<body οnlοad="loaded()">
</body>
<script type="text/javascript">
   function loaded(){
  alert("哈哈哈");
   }
</script>

上述代码中 的loaded（）方法是在body中的代码执行完后调用的。

示例：

<body>
   <form name="f1" id="f1"   action="http://www.baidu.com"  method="get" οnsubmit="return check()">
    
    <table>
    <tr>
       <td>Login</td>
       <td><input type="text" name="username" id="username" οnblur="confirmUserName()"></td>
       <td><span id="span_username"></span></td>
    </tr>
    
    <tr>
    <td>Password</td>
    <td><input type="password" name="password" id="password" οnblur="confirmUserPassword()" ></td>
    <td><span id="span_password"></span></td>
    </tr>
    
    <tr>
      <td colspan="2" ><input type="submit" ></td>
    </tr>
    
    </table>
     
    </form>
</body>
<script type="text/javascript">
   //οnblur="confirmUserName(),表示鼠标的焦点不在username的输入框中时调用这个方法
   function confirmUserName(){
  
  var span_username=document.getElementById("span_username");
  //获取用户名
  var username=document.getElementsByName("username")[0].value;
  //判断用户名长度
  if(username==null||username.length>8||username.length<5){
  
  span_username.innerHTML="用户名长度必须在5到8位之间";
  }else{
  
  span_username.innerHTML="";
  }
  
   }
   
   function confirmUserPassword(){
  var span_username=document.getElementById("span_password");
  
  var password=document.getElementsByName("password")[0].value;
    if(password==null||password.length>8||password.length<5){
  
    span_password.innerHTML="密码长度必须在5到8位之间";
  }else{
  
  span_password.innerHTML="";
  }
   }
 
</script>

结果如下图：







安静点DGC
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详谈javascript中DOM的基本属性
01-19
结构和内容属性 nodeType 所有的节点都有类型，节点总共有以下的12种类型。 代码如下: interface Node { // NodeType const unsigned short ELEMENT_NODE = 1; const unsigned short ATTRIBUTE_NODE = 2; const...
JavaScript2_HTML属性操作
今天更加博学了吗？
08-20 177
属性名 属性值 属性的读操作：获取、找到 元素.属性名 属性的写操作：替换、修改 元素.属性名 ＝ 新的值 添加的话，需要用 += innerHTML 读取元素内的所有HTML代码 字符串连接： + 属性读写操作的注意事项 JS属性中不允许出现“-”，例如font-size改为fontSize class在js里面是保留字，在js作用class要用className 所有的相对路径都别拿来做判断...
Javascript DOM常用场景（1.删除行为前的提示 2.登陆时候，验证账号密码是否为空 3.判断密码是否是数字（整数） 4.验证email格式是否正确）
qq_37758122的博客
09-04 331
1.删除行为前的提示（在进行删除操作前，都应该提示用户是否要删除） <head> <meta charset="UTF-8"> <title>哈哈哈哈</title> </head> <script> function deleteRow(link){ b = confirm("确定删除？"); if (!b) return; table = document.getEleme
js通过innerHTML添加元素点击事件
最新发布
可达鸭的博客
05-10 248
js往元素里动态添加一个按钮，并激活点击事件innerHTML
Vue中动态拼接innerHTML时添加点击事件，并在点击事件中调用vue方法
BADAO_LIUMANG_QIZHI的博客
04-13 6379
场景 在VUE页面中动态生成某个弹窗的innerHTML的内容。 内容中添加一个button，并设置Button的点击事件， 在点击事件中能调用vue的方法。 注： 博客：霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 1、innerHTML的内容如下 str =`
DOM-24 【innerHTML】
小管打天下的博客
06-21 325
一、innerHTML （1）注意事项 （2）实体字符转换 pre标签可以把实体字符转换成标签 （3）执行过程 （4）安全问题 HTML5和现代的新的浏览器都会阻止这种通过innerHTML嵌入script脚本的程序执行 在dom节点的基础上去追加html字符串，会破坏原来的dom节点的引用，但是追加了以后再重新获取节点就不会被破坏 插入纯文本的时候，就不要使用innerHTML （5）优化方案 这样就只是把一个字符串放进了一个dom节点里，这个节点是在内存里面的，并没有在document文档
弹框里innerHtml加入的html绑定点击事件
notagoodwriter的博客
12-10 1481
弹框里innerHtml加入的html绑定点击事件
JavaScript之DOM插入更新删除_动力节点Java学院整理
10-19
- DOM节点的`style`属性可以直接访问和修改CSS样式，但需要将CSS属性名转换为驼峰式，如`fontSize`代表CSS中的`font-size`。 ```javascript var p = document.getElementById('p-id'); p.style.color = '#ff0000';...
JavaScript-DOM:JS学习者使用JavaScript DOM的最小项目
04-27
例如，你可以创建一个新的`<div>`元素，然后添加属性或子节点。例如： ```javascript let newDiv = document.createElement('div'); newDiv.id = 'myDiv'; let newParagraph = document.createTextNode('Hello, ...
javascript节点操作DOM属性和方法
03-16
在JavaScript中，我们可以通过以下方式访问DOM节点： 1. `getElementById()`：通过元素的ID获取节点，这是最直接的方法。 2. `getElementsByClassName()`：返回具有特定类名的所有元素的NodeList。 3. `...
innerHTML动态添加html代码和脚本兼容多个浏览器
09-04
而Firefox和Opera则要求在插入时，innerHTML的节点不在DOM树中。 为了解决这个问题，我们可以编写一个跨浏览器的`set_innerHTML`函数，这个函数能够确保插入的HTML代码中的脚本在所有支持的浏览器中正确执行。下面...
JavaScript中innerHTML，innerText，outerHTML的用法及区别
10-23
在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，outerHTML的用法及区别吧。
关于在innerHTML中JS不执行的问题
03-28
NULL 博文链接：https://wuzhengxuan.iteye.com/blog/1263906
JavaScript--DOM--HTML 的 innerHTML 属性
norang的博客
06-06 468
7.1.2 innerHTML 属性 现如今的浏览器几乎都支持属性innerHTML ，这个属性并不是W3C DOM标准的组成部分，但现已经包含到HTML5规范中。它始见于微软 公司的IE 4浏览器，并从那时起逐渐被其他的浏览器接受。 innerHTML 属性可以用来读、写某给定元素里的HTML内容。要了解它 如何工作，请把下面这段代码插入test.html 文档的 部分： 用DOM 的眼睛看testdiv 内的标记，是如图7-2所示的结构。 div 元素的id 是testdiv 。它包含一个元素节点（
innerHTML里面的标签绑定事件
刘小飞
04-11 8965
我们想要给innerHTML里的标签绑定事件的话，我想到的办法就是利用事件委托的方法，事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。 首先是我们要获得innerHTML里面的内容或者是给父元素绑定事件。 在下面的例子中比如 innerHTML中有一个img标签当我们点击img时console出他的属性       (click)="bigPic(msg.co
JavaScript中DOM-innerHTML详解
qq_42526440的博客
09-18 1542
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如：这是内容 我们可以通过 document.getElementById(“ABC”).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(“ABC”).innerHTML=’这是被插入的内容’; 这样就能向id为abc的对象插入内容。 实例：...
html innerhtml 绑定事件无效,js中innerHTML的动态绑定的事件丢失
weixin_32127359的博客
06-03 2940
js事innerHTML事件丢失老前端人以前很容易遇到这种问题。渲染服务器端的数据，包装成自己的HTML，使用innerHTML或者.html()，异步的把它渲染上去。这时候会发现子元素写的一些事件不生效。image案发现场例如我们想在body中追加一个div,仔细看下面这个代码，您就会发现我在说什么了。按钮var ob = document.getElementById('btn');//doc...
innerHTML插入dom绑定事件-事件委托
KangTongShun的博客
11-05 1474
一、前言 最近遇到了个令人难受的需求，前端需要根据接口返回的数据动态生成html页面，需求本身并无不妥，难受的是要兼容ie8，好多好用的语法都不能用，而且还遇到了个，用innerHTML插入dom之后，再为dom绑定事件是无法触发的，搞了好久最后妥协了，用了事件代理的方式解决该问题。 二、分析 事件代理、事件委托的概念就不说了，直接上代码了. 这里我自己封装了一套兼容ie8的事件代理器。 首先，是第一个兼容点 1、绑定事件： function bindEvent(obj,eventStr,callback
JavaScript DOM innerHTML和innerText修改元素内容
grace_it的博客
07-02 9702
在上一篇删除子节点的文章中，有提到一个属性innerHTML，元素对象都有innerHTML属性和innerText属性，但一般不用innerText属性，因为有浏览器兼容性问题，大多浏览器都不支持。 innerHTML属性：表示标签中内容，此内容可以是标签，也可以是纯文本。 innerText属性：表示标签中文本内容，此内容只能是纯文本，如果存在标签，则原样输出。 var h1 = docu...
JS 用foreach 将数组遍历将数据用innerhtml渲染到dom节点，写个例子
06-09
好的，以下是一个使用 `forEach` 遍历数组，将数据用 `innerHTML` 渲染到 DOM 节点的例子： HTML： ```html <ul id="list"></ul> ``` JavaScript： ```js const data = ['apple', 'banana', 'orange']; const ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值