innerHTML属性:
1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容

  1.  <html>
  2.      <head>
  3.          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.          <title>Untitled Document</title>
  5.  
  6.          <script type="text/javascript">
  7.  
  8.              //测试 innerHTML 属性
  9.              window.onload = function(){
  10.                  var cityNode = document.getElementById("city");
  11.                  alert(cityNode.innerHTML);
  12.  
  13.                  //互换 #city 节点和 #game 节点中的内容.
  14.                  var tempHTML = cityNode.innerHTML;
  15.                  var gameNode = document.getElementById("game");
  16.  
  17.                  cityNode.innerHTML = gameNode.innerHTML;
  18.                  gameNode.innerHTML = tempHTML;
  19.              }
  20.  
  21.          </script>
  22.  
  23.      </head>
  24.      <body>
  25.          <p>你喜欢哪个城市?</p>
  26.          <ul id="city"><li id="bj" name="BeiJing">北京</li>
  27.              <li>上海</li>
  28.              <li id="dj">东京</li>
  29.              <li id="se">首尔</li>
  30.          </ul>
  31.  
  32.          <br><br>
  33.          <p>你喜欢哪款单机游戏?</p>
  34.          <ul id="game">
  35.              <li id="rl">红警</li>
  36.              <li>实况</li>
  37.              <li>极品飞车</li>
  38.              <li>魔兽</li>
  39.          </ul>
  40.  
  41.          <br><br>
  42.          gender:
  43.              <input type="radio" name="gender" value="male"/>Male
  44.              <input type="radio" name="gender" value="female"/>Female
  45.  
  46.          <br><br>
  47.          name: <input type="text" name="username" value="atguigu"/>
  48.  
  49.      </body>
  50.  </html>

JavaScript的DOM编程--12--innerHTML属性的更多相关文章

  1. JavaScript的DOM编程--03--读写属性节点

    读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue ...

  2. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  3. javascript之DOM编程通过html元素的标签属性找节点

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  5. 高性能Javascript(2) DOM编程

    第三部分 DOM编程 文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

  6. javascript操作DOM的方法与属性

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构. 将HTML代码分解为DOM节点层次图: ...

  7. JavaScript的DOM编程--07--节点的属性

    节点的属性: 1). nodeName: 代表当前节点的名字. 只读属性. 如果给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串 2). nodeType:返回一个整 ...

  8. javascript之DOM编程根据属性找标签练习

    首先看一下需求: 当点击全选时,选中所有的,当再点击时,全部取消.且选中某些项,点击总金额,会显示处总的金钱数. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. 高性能JavaScript（DOM编程）

    首先什么是DOM?为什么慢? DOM:文档对象模型,是一个独立于语言的,用于操作XML和HTML文档的程序接口(API) 用脚本进行DOM操作的代价很昂贵.那么,怎样才能提高程序的效率? 1.DOM访 ...

随机推荐

  1. HDU4508--完全背包

    湫湫系列故事--减肥记I Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Tot ...

  2. Postgres中表和元组的组织方式

    PG version 9.5.3 PG中四种堆文件: 普通堆 临时堆 序列堆 TOAST表 PageHeaderData长度为24(截图为8.4版本,20字节)个字节包含的内容如下: 空闲空间的起始和 ...

  3. 17. ZooKeeper常见的分布式系统任务——屏障

    以后几节中主要介绍以下内容: 如何执行领导者选举,组员管理和两阶段提交协议等常见的分布式系统任务 如何实现一些分布式数据结构,如屏障(barrier),锁(lock)和队列(queue) 这一章中概述 ...

  4. js图片懒加载（滚动加载）是否生效

    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...

  5. Ali RocketMQ与Kafka对照

    淘宝内部的交易系统使用了淘宝自主研发的Notify消息中间件,使用Mysql作为消息存储媒介.可全然水平扩容,为了进一步减少成本.我们觉得存储部分能够进一步优化,2011年初,Linkin开源了Kaf ...

  6. Chrome development tools学习笔记(5)

    调试JavaScript 随着如今JavaScript应用的越来越广泛,在面对前端工作的时候,开发人员须要强大的调试工具来高速有效地解决这个问题.我们文章的主角,Chrome DevTools就提供了 ...

  7. cocos2d-x 托付模式的巧妙运用——附源代码（一）

    先来说一下托付模式是什么.以下的内容摘要自维基百科: 托付模式是软件设计模式中的一项基本技巧.在托付模式中,有两个对象參与处理同一个请求.接受请求的对象将请求托付给还有一个对象来处理.托付模式是一项基 ...

  8. Maven实战（九）——打包的技巧

    "打包"这个词听起来比較土.比較正式的说法应该是"构建项目软件包".详细说就是将项目中的各种文件,比方源代码.编译生成的字节码.配置文件.文档,依照规范的格式生 ...

  9. 经常使用的C#代码（每日更新）

    欢迎使用该软件,软件中包括了经常使用的代码.而且每日更新. 该软件还在开发中,O(∩_∩)O~ 目的: 1.提高工作效率 2.格式化代码,方便阅读 3.必备工具 4.偷懒专用 watermark/2/ ...

  10. 注册Azure AD 2.0 应用程序

    作者:陈希章 发表于 2017年3月22日 上一篇 介绍了Microsoft Graph应用程序的一些概念,以及目前还比较普遍的Azure AD 1.0应用程序的注册方式.但正如我多次提到的那样,虽然 ...