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

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <title>Untitled Document</title>

         <script type="text/javascript">

             //测试 innerHTML 属性

             window.onload = function(){

                 var cityNode = document.getElementById("city");

                 alert(cityNode.innerHTML);

                 //互换 #city 节点和 #game 节点中的内容.

                 var tempHTML = cityNode.innerHTML;

                 var gameNode = document.getElementById("game");

                 cityNode.innerHTML = gameNode.innerHTML;

                 gameNode.innerHTML = tempHTML;

             }

         </script>

     </head>

     <body>

         <p>你喜欢哪个城市?</p>

         <ul id="city"><li id="bj" name="BeiJing">北京</li>

             <li>上海</li>

             <li id="dj">东京</li>

             <li id="se">首尔</li>

         </ul>

         <br><br>

         <p>你喜欢哪款单机游戏?</p>

         <ul id="game">

             <li id="rl">红警</li>

             <li>实况</li>

             <li>极品飞车</li>

             <li>魔兽</li>

         </ul>

         <br><br>

         gender:

             <input type="radio" name="gender" value="male"/>Male

             <input type="radio" name="gender" value="female"/>Female

         <br><br>

         name: <input type="text" name="username" value="atguigu"/>

     </body>

 </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. jquery 循环数组输出显示在html页面

    jquery 没有双向数据绑定,但是很多需求确实需要我们从后台接收到数组或者对象循环显示在前台页面上,这时我们可以用字符串拼接,元素添加的方法去实现 js部分如下: $(function(){ var ...

  2. Haproxy配置日志显示

    安装完haproxy后,日志默认是记录在系统日志下的.为了便于排错以及查看日志,我们需要将haproxy日志剥离出来. 在配置前,我们先来了解下日志的level: local0-local7 16-2 ...

  3. 代码管理 ，git 命令整理

    //先要理解这四个概念,这是一个提交代码的流动轨迹:1.工作区(编辑器)-经过add到2- 2.暂存区 (缓存)- 经过commit3-3.本地仓库 (本地项目)-经过 push4-4.远程仓库 (线 ...

  4. java日期详解

    [TOC] 一.简介 java中的日期处理一直是个问题,没有很好的方式去处理,所以才有第三方框架的地位比如joda. 文章主要对java日期处理的详解,用1.8可以不用joda. 1. 相关概念 首先 ...

  5. java傻瓜简单100%一定看的懂新手安装教程

    1.java官网   最新的不是很稳定 http://www.oracle.com/technetwork/java/javase/downloads/index.html 一直点下一步就可以,但别忘 ...

  6. CAN通讯的总结

    1.CAN通讯有套国际标准,套协议版本号,种故障状态,种数据帧类型,种总线错误类型. 2.CAN的国际标准有两种ISO11898和ISO11519. 3.CAN2.0协议分为A版和B版两种,A版协议仅 ...

  7. hibernate 映射组成关系

    建立域模型和关系数据模型有着不同的出发点: 域模型: 由程序代码组成, 通过细化持久化类的的粒度可提高代码的可重用性, 简化编程 在没有数据冗余的情况下, 应该尽可能降低表的数目, 简化表之间的參照关 ...

  8. python的unittest測试框架的扩展浅谈

    非常多时候測试框架须要依据測试数据来自己主动生成測试用例脚本,比方接口測试,通过不同參数构建组合去请求接口,然后验证返回结果.假设这样能通过配置excel数据来驱动測试.而不用去写一大堆的測试用例脚本 ...

  9. 什么是PMI

    项目管理协会 PMI PMI是世界领先的非盈利会员协会的项目管理专业机构 ,在全球185个国家有70多万会员和证书持有人.此外,PMI还是多个英文短语的缩写,较为著名的是采购经理指数PMI. 项目管理 ...

  10. Java数组的一些使用方法及堆栈存储

    数组 用于存储一组同一数据类型数据的容器 数组会对放入其中的数据自动编号,编号是从0开始的---下标 定义格式 数据类型[] 数组名 = new 数据类型[数组的大小];---可以先声明再初始化 in ...