iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中innerHTML使用方法实例
  • 329
分享到

JavaScript中innerHTML使用方法实例

js中innerhtml的用法js中innerhtmljs中的innerhtml 2022-11-13 18:11:32 329人浏览 薄情痞子
摘要

目录innerhtmlinnerHTML的写法总结innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就

innerHTML

innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法

innerHTML的写法

对于element,设置innerHTML指定的元素名称

element.innerHTML;

将指定元素的html代码分配给变量

var sample1 = element.innerHTML

用指定元素替换变量的值

通过如下编写,可以在删除element元素的内容之后在element元素上显示变量sample2的内容

element.innerHTML = sample2;

清空指定的元素

        可以通过指定""来清空element元素的内容

element.innerHTML = "";

 下面我们来看innerHTML使用的具体实例

<html>
    <head>
        <meta charset = "utf-8">
        <title></tiTKE>
    </head>
    <body>
    <div id ="txt">
        <div id="txt1">文字内容</div>
        <span id="txt2">文字内容2</span>
 
    </div>
    <p>-----------------------</p>
    <div id = "innerHTML"></div>
</body>
</html>

        运行结果如下

 我们来看使用innerHTML属性的结果

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <div id="txt">
        <div id="txt1">文字内容</div>
        <span id="txt2">文字内容2</span>
    </div>
    <p>-----------------------</p>
    <div id = "innerHTMLtxt"></div>
        <script type="text/javascript">
            innerHTMLtxt.innerHTML="恰恰走丢了"
          </script>
</body>
</html>

运行结果如下 

清空指定的元素

        可以通过指定""来清空element元素的内容 使用innerHTML来清空元素的代码

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <div id="txt">
        <div id="txt1">文字内容</div>
        <span id="txt2">文字内容2</span>
    </div>
    <p>-----------------------</p>
    <div id = "innerHTMLtxt"></div>
        <script type="text/javascript">
            txt.innerHTML=""
            innerHTMLtxt.innerHTML="qq走丢了"
        </script>
</body>
</html>

div标签为txt的已经被innerHTML清空

总结

到此这篇关于JavaScript中innerHTML使用方法的文章就介绍到这了,更多相关js的innerHTML使用内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中innerHTML使用方法实例

本文链接: https://www.lsjlt.com/news/169396.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript中innerHTML使用方法实例
    目录innerHTMLinnerHTML的写法总结innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就...
    99+
    2022-11-13
    js中innerhtml的用法 js中innerhtml js中的innerhtml
  • JavaScript中Promise的使用方法实例
    目录前言Promise简介什么是回调地狱Promise的特点创建Promise实例then方法resolve 和 reject 的参数传递then()链式调用then()的返回值ca...
    99+
    2024-04-02
  • JavaScript中Set基本使用方法实例
    目录介绍基本API1. 创建Set实例2. Set实例转数组3. size属性4. add()5. has()6. delete()7. clear()8. 迭代补充:JS...
    99+
    2022-11-16
    js set使用 js中set用法 javascript set
  • javascript中使用toSource()方法的示例
    小编给大家分享一下javascript中使用toSource()方法的示例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!JavaScript的特点1.JavaSc...
    99+
    2023-06-14
  • JavaScript中String对象的使用方法以及实例
    方法总览: 实例(js中字符串和字符串对象之间能够自由转换,字符串可以直接使用字符串对象的方法和属性):  var ss="孙士彬倪炜豪汤键倪炜豪"; documen...
    99+
    2024-04-02
  • JavaScript中array.reduce()数组方法的四种使用实例
    目录1、累加和累积乘法2、获取一个数组的最大值和最小值3、计算数组中元素出现的频率4、多个数组的展平总结Array.prototype.reduce() 是数组中最强大的方法之一,也...
    99+
    2024-04-02
  • JavaScript基础使用方法实例分析
    这篇文章主要介绍“JavaScript基础使用方法实例分析”,在日常操作中,相信很多人在JavaScript基础使用方法实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • JavaScript数组reduce()方法使用实例详解
    目录前言1、累加和累积乘法2、获取一个数组的最大值和最小值3、计算数组中元素出现的频率4、多个数组的展平总结前言 今天请让我详细介绍一下这个方法,希望对你有帮助。 这是 reduce...
    99+
    2024-04-02
  • JavaScript中fetch()用法实例
    目录fetch 基本使用Response 对象1、同步属性2、判断请求3、操作标头4、读取内容5、创建副本6、底层接口定制 HTTP 请求取消 fetch 请求总结fetch 基本使...
    99+
    2024-04-02
  • JavaScript中Switch方法实例分析
    本篇内容主要讲解“JavaScript中Switch方法实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中Switch方法实例分析”吧...
    99+
    2024-04-02
  • javascript中&&运算符与||运算符的使用方法实例
    目录前言&&运算符||运算符||运算符的小demo本章目标案例实践(通过加载json渲染数据)结尾总结前言 在前端开发领域中,&&运算符和||运算符...
    99+
    2024-04-02
  • JavaScript中reduce()的用法实例
    前言 过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它。事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单...
    99+
    2024-04-02
  • JavaScript中数组方法的错误使用例子
    这篇文章将为大家详细讲解有关JavaScript中数组方法的错误使用例子,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 不要使用Array.indexOf,使用Arr...
    99+
    2024-04-02
  • c#中token的使用方法实例
    目录token的存在意义使用方法token的存在意义 这是我初略了解的token的存在意义 用户使用用户名密码来请求服务器服务器进行验证用户的信息服务器通过验证发送给用户一个toke...
    99+
    2024-04-02
  • Kotlin 语言中调用 JavaScript 方法实例详解
    Kotlin 语言中调用 JavaScript 方法实例详解Kotlin 已被设计为能够与 Java 平台轻松互操作。它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类。但是,JavaScri...
    99+
    2023-05-31
    kotlin javascript avascript
  • JavaScript中数组flat方法的使用与实现方法
    目录前言语法参数返回值使用示例方法实现1、当只扁平化一层的时候2、当数组展平的层数为最大层时3、数组扁平化使用参数控制扁平的深度总结前言 flat() 方法会按照一个可指定的深度递归...
    99+
    2024-04-02
  • JavaScript中this指向方法实例分析
    这篇文章主要讲解了“JavaScript中this指向方法实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中this指向方法实例分...
    99+
    2024-04-02
  • JavaScript ES6中class定义类实例方法
    目录前言正文1.声明类的两种方式:2.class 类的构造函数3.class中方法定义3.1 class 中定义普通的实例方法3.2 class 类中定义访问器方法3.3 类的静态方...
    99+
    2024-04-02
  • JSON在Java中的使用方法实例
    目录1 为什么要使用JSON简介优点:缺点:举个栗子:四个基本语法:Java解析JSON的四种方式:四种方式的比较:四种方式的简单例子:FastJSON方式详解在Java中JSON存...
    99+
    2023-03-15
    json在java中的应用 java 使用json java json解析
  • JavaScript中arguments的使用方法
    目录一、arguments的使用二、arguments.callee的使用一、arguments的使用 当我们不确定有多少个参数传递的时候,可以用 arguments 来获取。在 J...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作