<!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. Robot Framework（八） 资源和变量文件

    2.7资源和变量文件 测试用例文件和测试套件初始化文件中的用户关键字和变量只能在创建它们的文件中使用,但资源文件提供了共享它们的机制.由于资源文件结构非常接近测试用例文件,因此很容易创建它们. 变量文 ...

  2. OAuth网络协议

    一.应用场景 为了理解OAuth的适用场合,让我举一个假设的例子. 有一个"云冲印"的网站,可以将用户储存在Google的照片,冲印出来.用户为了使用该服务,必须让"云冲 ...

  3. 通过yum仓库安装mysql

    1,下载安装包wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm2,安装mysql源yum -y ins ...

  4. eas源码示例1

    EditUI:  this.kdtEntrys.getRow(0).getCell(1).setValue("这个是第一行的第1个单元格的值");  public void loa ...

  5. eas之日期选择控件

    初始化打印控件KDPrinter ctrlPrinter = new KDPrinter(); 增加列 // 指定插入位置table.addColumn(index);// 插入到最后table.ad ...

  6. UNIX C 文件权限 Part2_day01

    1.文件访问测试 测试调用进程对指定文件是否拥有足够的访问权限 #include <unistd.h> int access(const char* pathname,int mode); ...

  7. 25.partial update内置乐观锁并发控制

    主要知识点     (1)partial update内置乐观锁并发控制 (2)retry_on_conflict post /index/type/id/_update?retry_on_confl ...

  8. C#学习笔记_02_数据类型

    02_数据类型 基本数据类型 整型 有符号整型:最高位是正负号 字节型:sbyte 1byte:[-128,127] 短整型:short: 2byte:[-2^(位数-1),2^(位数-1)-1] 整 ...

  9. 《奋斗吧！菜鸟》 第八次作业：Alpha冲刺 Scrum meeting 5

    项目 内容 这个作业属于哪个课程 任课教师链接 作业要求 https://www.cnblogs.com/nwnu-daizh/p/11012922.html 团队名称 奋斗吧!菜鸟 作业学习目标 A ...

  10. MySQL架构优化实战系列3：定时计划任务与表分区

    原创 2016-07-08 汤抗 DBAplus社群 一 定时计划任务 1.概论   mysql计划任务可以定时更新数据库表或者做大文件的汇总表.   2.配置 开启计划任务 SHOW VARIABL ...