JavaScript的DOM编程--12--innerHTML属性

时间：2023-01-14 19:20:46

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&lpar;2&rpar; 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. 2015 史考特（Scottrade）开户指南 &plus; 招商银行香港一卡通汇款【图文教程】

    最近刚开始炒美股.总的来说分为两步:一是开户,即选一个美股券商开设股票交易账户:二是汇款注资,把人民币换成美元转账到股票交易账户上.上述第一点其实相对简单,美股券商大多都对美国以外的外国人开放申请,且 ...

  2. 浏览器是如何运行HTML的？

     什么是网页  网页(HTML page)是在浏览器(Browser)上运行并且可以与用户产生互动的应用程序.                            此图为浏览器运行HTML 这个想说 ...

  3. &period;net后台获取DataTable数据，转换成json数组后传递到前台，通过jquery去操作json数据

    一,后台获取json数据 protected void Page_Load(object sender, EventArgs e){  DataTable dt = DBhepler.GetDataT ...

  4. Java反射异常：java&period;lang&period;NoSuchFieldException

    版权声明:[分享也是一种提高]个人转载请在正文开头明显位置注明出处,未经作者同意禁止企业/组织转载,禁止私自更改原文,禁止用于商业目的. 今天用反射给对象赋值,有一个属性始终报错,主要错误信息如下: ...

  5. ORACLE network environment

    监听程序 建立网络连接 要建立客户机或中间层连接,Oracle Net要求客户机 下列事项: 运行监听程序的主机 监听程序监视的端口 监听程序使用的协议 监听程序处理的服务名 Hostname/ip ...

  6. tensorflow mac安装方法

    480  pip install https://storage.googleapis.com/tensorflow/mac/tensorflow-0.5.0-py2-none-any.whl 481 ...

  7. MT【152】不患寡而患不均

    ((清华2017.4.29标准学术能力测试1) $a_1,a_2,\cdots,a_9$ 是数字$1$到$9$ 的一个排列,则 $a_1a_2a_3+a_4a_5a_6+a_7a_8a_9$ 的最小值 ...

  8. 百度editor编辑器添加新字体

    Ueditor本身自带11种字体,添加如下: 1.找到文件 ueditor/lang/zh-cn/zh-cn.js ,添加字体 'fontfamily': {        'songti': '宋体 ...

  9. BZOJ4029 HEOI2015定价

    贪心. 每次将最后一个非零位加一判断即可. 一开始想少了,只关心把最后一位变成5了,其实可以都变的. #include<bits/stdc++.h> using namespace std ...

  10. 第二百零二节，jQuery EasyUI，Layout&lpar;布局&rpar;组件

    jQuery EasyUI,Layout(布局)组件 学习要点: 1.加载方式 2.布局属性 3.区域面板属性 4.方法列表 本节课重点了解 EasyUI 中 Layout(布局)组件的使用方法,这个 ...

相关文章