<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

    #div1 {width: 200px;height: 200px;border: 1px solid black;}

</style>

</head>

<body>

<input id="txt1" type="text">

<input id="put1" type="button" value="改文字" />

<br/><br/>

<div id="div1"></div>

<script>

    var otxt=document.getElementById('txt1');

    var oput=document.getElementById('put1');

    var odiv=document.getElementById('div1');

    oput.onclick=function()

    {

        odiv.innerHTML=otxt.value;/*innerHTML里面就是正常的HTML，可以放上p、h1等*/

    }

</script>

</body>

</html>

innerHTML的用法的更多相关文章

  1. innerText和innerHTML， outerHTML

    js中 innerHTML与innerText的用法与区别及解决Firefox不支持Js的InnerHtml问题 用法: <div id="test"> <spa ...

  2. innerHTML和createTextNode的区别

    innerHTML的用法 tablerowObject.innerHTML createTextNode的用法 createTextNode(data) 返回新创建的 Text 节点,表示指定的 da ...

  3. DOM树操作

    DOM 操作 访问与树关系(节点) 绘制 DOM 树: childNodes, attributes 从一个中心元素访问其所有的直系亲属元素 访问父节点: parentNode 访问上一个兄弟节点: ...

  4. js_面向对象编程

    主要内容 值类型与引用类型的特征 深拷贝与浅拷贝 对象的动态特性 构造函数的执行过程 异常处理 dom操作(略) <!DOCTYPE html> <html> <head ...

  5. 混淆篇之原生DOM操作方法小结

    1.0   DOM结构 1.1先来看结构图: 父节点        兄弟节点        当前节点            属性节点            子节点        兄弟节点一般任意一个节 ...

  6. JS代码静态分析及挖掘

    JavaScript 已经成为现代 Web 浏览器开发中最普遍的技术之一.使用客户端 JavaScript 框架(如 AngularJS,ReactJS 和 Vue.js)构建的应用程序已向前端输送了 ...

  7. 【JavaScript】innerHTML、innerText和outerHTML的用法区别

    用法: <div id="test">   <span style="color:red">test1</span> tes ...

  8. js中innerHTML与innerText的用法与区别

    用法: <div id="test">    <span style="color:red">test1</span> te ...

  9. js中innerHTML、outerHTML与innerText的用法与区别

    ____________________________________________________________________________________________________ ...

随机推荐

  1. KVM之virsh管理虚拟机内存

    调整内存 virsh setmem 命令帮助: [root@ubuntu ~]# virsh setmem --help NAME setmem - change memory allocation ...

  2. BZOJ 4999: This Problem Is Too Simple！ DFS序+LCA+树状数组+离线

    Code: #include<bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) , ...

  3. BZOJ 1827: [Usaco2010 Mar]gather 奶牛大集会 树形DP + 带权重心

    Description Bessie正在计划一年一度的奶牛大集会,来自全国各地的奶牛将来参加这一次集会.当然,她会选择最方便的地点来举办这次集会.每个奶牛居住在 N(1<=N<=100,0 ...

  4. java环境搭建心得

     右击此电脑,点击属性, 在打开的电脑系统对话框里发电机i直接点击左侧导航里的[高级系统设置]在打开的电脑系统属性对话框里直接点击下面的[环境变量] 打开环境变量对话框后,直接点击系统变量下面的新建, ...

  5. C#那20道题

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. POJ3069 Saruman's Army【贪心】

    Saruman the White must lead his army along a straight path from Isengard to Helm's Deep. To keep tra ...

  7. 通过Sqoop实现Mysql / Oracle 与HDFS / Hbase互导数据

    通过Sqoop实现Mysql / Oracle 与HDFS / Hbase互导数据\ 下文将重点说明通过Sqoop实现Mysql与HDFS互导数据,Mysql与Hbase,Oracle与Hbase的互 ...

  8. uva 11624

    #include<stdio.h> #include<string.h> #include<queue> using namespace std; #define ...

  9. AT+CSMP 设置短消息文本参数

    AT+CSMP 设置短消息文本参数 2009-05-18 12:03 AT+CSMP 设置短消息文本参数(text模式下) 设置:AT+CSMP=<fo>,<vp/scts>, ...

  10. ELK 聚合查询

    在elasticsearch中es支持对存储文档进行复杂的统计.简称聚合. ES中的聚合被分为两大类. 1.Metrics, Metrics 是简单的对过滤出来的数据集进行avg,max等操作,是一个 ...