开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如果在innerhtml中有url，如何执行if else语句并显示内部html？

在innerHTML中包含URL时，您可以执行if-else语句并显示内部HTML的方法如下：

首先，您需要获取要包含URL的元素，例如使用document.getElementById来获取元素的引用。

接下来，您可以使用条件语句（if-else）来检查URL是否存在或满足特定条件。您可以使用JavaScript的字符串方法（例如includes()）或正则表达式来检查URL。

根据条件的结果，您可以使用innerHTML属性来设置元素的内容为相应的HTML代码。

下面是一个示例代码片段：

<!DOCTYPE html>
<html>
<head>
  <title>if-else语句和innerHTML示例</title>
  <script>
    function handleURL() {
      var element = document.getElementById('myElement');
      var url = element.innerHTML; // 假设这里是URL的值

      if (url.includes('example.com')) {
        // 如果URL中包含'example.com'
        element.innerHTML = '<p>显示的HTML代码，满足条件。</p>';
      } else {
        // 如果URL不满足条件
        element.innerHTML = '<p>显示的HTML代码，不满足条件。</p>';
      }
    }
  </script>
</head>
<body>
  <div id="myElement">https://www.example.com</div>
  <button onclick="handleURL()">执行条件判断</button>
</body>
</html>

在上面的示例中，当点击按钮时，会调用handleURL()函数。该函数首先获取ID为'myElement'的元素引用，然后获取元素的innerHTML的值作为URL。

接下来，使用if-else语句检查URL中是否包含'example.com'。根据条件的结果，通过设置innerHTML属性来更改元素的内容。

请注意，这只是一个示例，您可以根据实际需求进行修改和扩展。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【一起来烧脑】一步学会JavaScript体系

JavaScript 是一种轻量级的编程语言可插入 HTML 页面的编程代码 JavaScript的用法，输出，语句，注解，变量，数据类型，函数，运算符，比较，条件语句，循环，Break，错误，类型转换...document.write() 将内容写到HTML文档中 innerHTML写入到HTML元素 console.log()写到控制台 document.getElementById("myDIV...， JavaScript 函数 function functionName() { 是要执行的代码 } JavaScript 运算符运算符“=”用于赋值。...JavaScript 条件语句 if 语句 if...else 语句 if...else if....else 语句 switch 语句 JavaScript 循环 for for/in...元素通过指定的分隔符进行分隔 pop() 删除并返回数组的最后一个元素 push() 向数组的末尾添加一个或更多元素，并返回新的长度 reverse() 颠倒数组中元素的顺序 shift() 删除并返回数组的第一个元素

1.3K2 0

Js面试题__附答案

For、While、do-while loops 15、如何在JavaScript中将base字符串转换为integer？ parseInt() 函数解析一个字符串参数，并返回一个指定基数的整数。...如果在JavaScript中使用innerHTML，缺点是：内容随处可见；不能像“追加到innerHTML”一样使用；即使你使用+ = like“innerHTML = innerHTML +'html...'”旧的内容仍然会被html替换；整个innerHTML内容被重新解析并构建成元素，因此它的速度要慢得多；innerHTML不提供验证，因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断。...默认情况下，在页面加载期间，HTML代码的解析将暂停，直到脚本停止执行。这意味着，如果服务器速度较慢或者脚本特别沉重，则会导致网页延迟。在使用Deferred时，脚本会延迟执行直到HTML解析器运行。...EncodeURl（）用于将URL转换为十六进制编码。而DecodeURI（）用于将编码的URL转换回正常。 56、为什么不建议在JavaScript中使用innerHTML？

8.8K3 0

JavaScript基础系列

image.png 流程控制语句分支语句,prompt()的应用,alert()的应用 if(codition){ }else{ } nan和任何内容都不相等，包括它本身获取星期 new Date...，return语句可以不带有任何返回值，用于停止函数执行。...arguments是ecmascript中的参数在内部用一个数组表示，arguments对象只是与数组类似，并不是array的实例，[]语法用于访问它的每一个元素。...html事件函数的调用 DOM0级事件 ele.事件=执行脚本鼠标，键盘 onload, onclick, onmouseover, onmouseout...image.png 流程控制语句 if(condition){} prompt() 弹出输入框 alert() 弹出警告对话框 if(condition){ }else{ } if(condition

2.6K5 0

原生JS实现分页效果

做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生...JS如何实现一个分页效果呢？...DOCTYPE html> <meta http-equiv="Content-Type" content="text/<em>html</em>; charset=utf-8" /...// 如果总页数减去当前页等于0或者等于1(不能让其显示第11和12页) }else if ((allNum - nowNum) == 0 || (allNum.../标签页的内容为allNum - 5 + i(正常显示，没有第11页和第12页) oA.innerHTML = '[' + (allNum - 5

12.4K1 0

Vue核心与实践（一）

2.如何访问和修改 data中的数据（响应式演示） data中的数据, 最终会被添加到实例上 ① 访问数据： “实例.属性名” ② 修改数据： “实例.属性名”= “值” 3.总结什么是响应式如何访问和修改...vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令...（类似 innerHTML）使用语法：hello，意思是将 intro 值渲染到 p 标签中类似 innerHTML，使用该语法，会覆盖 p 标签原有内容...类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。...’,‘url2’,‘url3’，…] 2.可以准备个下标index 去数组中取图片地址。

771 0

Web前端基础（05）

s = “abc”; 安全性高,JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据不允许访问交互性高,因为JS语言可以嵌入到html页面中直接和用户进行交互 ###如何在html页面中引入...JavaScript 内联:在标签的事件属性中添加js代码,当事件触发时执行js代码内部:在html页面的任意位置添加script标签,标签体内写js代码,当页面加载时执行外部:在单独的js文件中写...js代码,在html页面中通过script标签的src属性引入,页面加载时执行 ###语法包括: 变量数据类型运算符各种语句方法面向对象 ###变量声明和赋值 JavaScript属于弱类型语言...3 typeof 变量; 作用: 获取变量的类型 ###语句 if else for while switch case for循环中 int i 改成 var i ###方法 java: public...返回值类型方法名(参数列表){方法体} js : function 方法名(参数列表){方法体} 如何声明常见的四种方法: 无参无返回值无参有返回值有参有返回值有参无返回值 js中有三种声明方法的格式

1.6K2 0

【Vue】day01-Vue基础入门

vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（...（类似 innerHTML）使用语法：hello，意思是将 intro 值渲染到 p 标签中类似 innerHTML，使用该语法，会覆盖...p 标签原有内容类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。...和 v-else-if 作用：辅助v-if进行判断渲染语法：v-else v-else-if="表达式" 需要紧接着v-if使用示例代码： ...','url2','url3'，...] 2.可以准备个下标index 去数组中取图片地址。

2865 0

客户端的js js脚本的引入 js的解析过程

放在一个url里，这个url使用javascript:协议后两个用的很少因为需要html和js分离，依据mvc进行分离，使得html变的结构化，易于阅读 script元素下面是一个数字时钟使用onload...事件处理程序 Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。...url中的js 应用用途书签通过协议类型指定url内容为任意字符串，该字符串是会被js解释器运行的js代码，其会被当成单独的一行代码实现。即语句之间必须使用分号作为分割。即，书签的实现。...客户端js时间线 web浏览器先创建document对象，并且开始解析web页面，（即根节点），解析html元素和其文本内容都会添加到其后方的节点中 html遇到script元素的时候，先执行内部脚本，...等待内部脚本执行完毕后，在继续解析html节点，此时节点解析会暂停。

13.1K8 0

JS快速入门（二）

返回窗口的网页显示区域高度 open（）格式：[url,name,features,replace] 参数说明 url 打开指定页面的 url，如果没有则打开空白页 name 指定 target...毫秒) setInterval("JS语句",时间间隔) // 在指定时间之后执行一次相应函数 var timer = setTimeout(function(){alert(123...它允许运行在浏览器中的代码访问文档节点并与之交互，了解并掌握 DOM 操作是 Web 开发中的必经之路 DOM结构及节点整个 HTML 的结构都可以由类似上图的树结构表示，整个树结构由节点组成...示例 // 更改为文字 document.querySelector('.box .item').innerHTML = '项目A' // 更改为 html 内容（p 元素中内容替换为 span 元素）...'beforeend' 插入元素内部的最后一个子节点之后 'afterend' 元素自身的后面示例 <!

6.6K3 0

【前端面试题】03—200+道常见JavaScript基础面试题上（附答案）

encodeURI()用于将URL转换为十六进制编码。而 decodeURI()用于将编码的URL转换回正常URL。 7、为什么不建议在 JavaScript中使用 innerHTML？...在使用Deferred时，脚本会延迟执行，直到HTML解析器运行。这缩短了网页的加载时间，并且它们的显示速度更快。 28、什么是闭包（ closure）？为了说明闭包，创建一个闭包。...31、在 JavaScript中有一个函数，执行直接对象查找时，它始终不会查找原型，这个函数是什么？ hasOwnProperty。 32、在 JavaScript中如何使用DOM？...它的功能是把对应的字符串解析成 Javascript代码并运行应该避免使用eval，它会造成程序不安全，非常影响性能（执行两次，一次解析成JavaScript语句，一次执行） 38、["1，"2，"3"...（4）整个 innerHTML内容被重新解析并构建成元素，因此它的速度要慢得多。（5） innerHTML不提供验证，因此可能会在文档中插入具有破坏性的HTML并将其中断。

4.5K1 0

jQuery源码——.html()方法原理解析

在将字符串转化为html碎片时，一般会将字符串作为容器的innerHTML属性赋值。...但innerHTML有很多局限性，比如我们想转化的字符串中有标签并且包含一个立即执行的函数，如果将此字符串通过innerHTML转化为html碎片，标签中的函数并不会被执行...jQuery中的.html()函数可以弥补innerHTML的缺陷，我们看下这个方法是如何实现的。其实原理很简单：正则匹配标签，获取js函数，然后用eval()函数解析。...jQuery在处理此工程中有几个细节值得学习。...第57行-79行，执行内部的代码，注意75行的 node.text || node.textContent || node.innerHTML || "" ，这是兼容写法，即获取<script

1.5K8 0

JS常见问题总结

语句一 : 语句二如果条件成立，执行 ? 后面语句，不成立执行：后面的语句 8. var a = 10;var b = a++; a、b 最后的结果是？...找参数的时候，即执行函数时，函数内部可以看作是一个小的区域，有自己的预解析，参数就跟变量 var 一样。 19. 函数声明和函数表达式声明的区别？...提取url中的参数并返回有这样一个url：http://item.taobo.com/item.html?...如何获取 url 地址中搜索内容？用?分割 search ?q=javascript 返回 URL 的查询字符串 36. 事件、IE 与火狐的事件机制有什么区别？...直接发送即可 } } // 注册事件 ajax.onreadystatechange = function () { // 在事件中获取数据并修改界面显示

3.2K4 0

JavaScript笔记总结(三)

not 条件语句 if语句 if (condition) { 当条件为 true 时执行的代码 } if…else 语句 if (condition) { 当条件为 true 时执行的代码...} else { 当条件不为 true 时执行的代码 } if…else if…else 语句 if (condition1) { 当条件 1 为 true 时执行的代码 } else...if (condition2) { 当条件 2 为 true 时执行的代码 } else { 当条件 1 和条件 2 都不为 true 时执行的代码 } switch 语句 switch...1; 语句 2; 语句 3) { //语句 1 （代码块）开始前执行被执行的代码块...//语句 2 定义运行循环（代码块）的条件 } //语句 3 在循环（代码块）已被执行之后执行 for/in 语句循环遍历对象的属性

9205 2

BOM和DOM

setTimeout() 一段时间后做一些事情　　　　　　语法： var t=setTimeout("JS语句",毫秒) 第一个参数js语句多数是写一个函数，不然一般的js语句到这里就直接执行了，...语法： setInterval("JS语句",时间间隔) 　　　　　　返回值　　　　　　一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。...然后用新的标签将该子标签替换掉属性节点　　　　　　获取文本节点的值： var divEle = document.getElementById("d1") divEle.innerText #输入这个指令，一执行就能获取该标签和内部所有标签的文本内容...，例如：选择河北省就显示河北省所有的市 <!...清空option c.innerHTML = ""; //清空显示市的那个select标签里面的内容　　 //4.循环所有的市，然后添加到显示市的那个select标签中 for

5341 0

JavaScript学习笔记1

Dom如何解析html文档： Dom会根据html的层次结构，在内存中形成一个树形结构，树形结构里面有标记元素和树形和文本等元素整个html文档对应一个document对象，通过document文档对象...else,if else if else等语句其他语句：for语句，switch,case语句等等比如： var a3=10; var b3=2r0; if(a3==b3)...如何在网页里面触发事件？...表单校验的知识点总结：1.错误信息:在一行显示，用他的innerHTML属性回显错误信息。...regex.test(value)) { phoneMsg.innerHTML="手机号不符合规范"; return false; } else{ phoneMsg.innerHTML

1.7K4 0

JavaScript笔记(三)

not 条件语句 if语句 if (condition) { 当条件为 true 时执行的代码 } if…else 语句 if (condition) { 当条件为 true 时执行的代码...} else { 当条件不为 true 时执行的代码 } if…else if…else 语句 if (condition1) { 当条件 1 为 true 时执行的代码 } else...if (condition2) { 当条件 2 为 true 时执行的代码 } else { 当条件 1 和条件 2 都不为 true 时执行的代码 } switch 语句 switch...1; 语句 2; 语句 3) { //语句 1 （代码块）开始前执行被执行的代码块...//语句 2 定义运行循环（代码块）的条件 } //语句 3 在循环（代码块）已被执行之后执行 for/in 语句循环遍历对象的属性

9922 0

JavaScript -1- 基础教程与部分功能示例

.js"> 基本语法条件语句使用 if 来规定要执行的代码块，如果指定条件为 true 使用 else 来规定要执行的代码块，如果相同的条件为 false 使用 else if...来规定要测试的新条件，如果第一个条件为 false 使用 switch 来规定多个被执行的备选代码块 if 语句 if (条件 1) { 条件 1 为 true 时执行的代码块 } else if...当指定条件为 true 时循环一段代码块 for 循环 for (语句 1; 语句 2; 语句 3) { 要执行的代码块 } While 循环 while (条件) { 要执行的代码块...语句，函数将停止执行。...("video_insert").innerHTML = video_html_res; 调整 html 元素属性 function set_video_attr(id){ var height

7132 0

AJAX 前端开发利器：实现网页动态更新的核心技术

以下是一个展示如何使用AJAX从XML文件中获取信息的示例：示例说明当用户点击上面的 "获取 CD 信息" 按钮时，将执行 loadDoc() 函数。...当服务器响应就绪时，myFunction() 函数会解析XML并构建一个包含CD信息的HTML表格，最终更新具有 "demo" ID 的元素。...在HTML表格中显示XML数据此示例循环遍历每个元素，并在HTML表格中显示和元素的值： table, th...= table; } 在HTML div元素中显示第一个CD 此示例使用一个函数来在具有id="showCD"的HTML元素中显示第一个CD元素：...CD，除非你在第一个CD上 if (i > 0) { i--; displayCD(i); } } 点击CD时显示专辑信息最后一个示例显示了当用户点击CD时如何显示专辑信息

1110 0

19 vue 模板语法及简要实现原理

文本插值vue是如何实现的？在vue源码中是通过解析template并建立虚拟dom实现的。...中，显示是纯文本，不是html。...查看编译后的html源码，发现v-html会在其所属的节点内部生成新节点，内容即是rawHtml，不会将所属节点替换。 ?...从源码中可以看出，v-html是通过给原生组件添加一个innerHTML属性实现的。在这里不涉及对innerHtml做二次解析，所以针对v-html指令实现模板的动态绑定，行不通。...在上面代码中，如果isButtonDisabled为false，在最终渲染出来的button的html源码中，看不到disabled属性的存在： ? 在vue源码中有一个setAttr函数： ?

3K1 0

JavaScript 前端知识点总结

,否则判断if(num2>num3),满足执行否则执行else里面的代码....，用来指向Error对象或者其他抛出的对象 } finally{ // 无论try中代码是否有异常抛出(甚至是try代码块中有return语句),...,并依次返回执行结果,就是嵌套函数....//确认按钮执行语句 }else{ alert("取消语句..")...= '输入正确'; } else { span.className = 'wrong'; span.innerHTML

2.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭