<!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. TensorFlow学习笔记----安装（1）

    在入门前,推荐一个博客链接:https://morvanzhou.github.io/tutorials/machine-learning/tensorflow/ Windows下tensorflow ...

  2. Django1.11配合uni-app发起微信支付！

    Django1.11配合uni-app发起微信支付! 经过三天的断断续续的奋战,我终于是干动了微信支付.为了以后不忘记,现在来一篇教程,来来来,开干!!! 一.准备阶段 1.准备阶段我们需要去微信官网 ...

  3. proc程序中使用PLSQL、Exception 、 动态SQL(day08)

    . proc中如何使用plsql 1.1 使用plsql的语法 exec sql execute begin /* 相当于plsql的匿名块 */ end; end-exec; 在预编译时,需要加如下 ...

  4. [51Nod 1218] 最长递增子序列 V2 (LIS)

    传送门 Description 数组A包含N个整数.设S为A的子序列且S中的元素是递增的,则S为A的递增子序列.如果S的长度是所有递增子序列中最长的,则称S为A的最长递增子序列(LIS).A的LIS可 ...

  5. 天翼云 RDS数据库操作

    1.RDS数据库创建好之后点击RDS实例管理找到已下信息 官方文档 -1:http://www.ctyun.cn/help/qslist/567 官方文档 -2:http://www.ctyun.cn ...

  6. java中的replaceAll方法注意事项

    replaceAll和replace方法参数是不同的,replace的两个参数都是代表字符串,replaceAll的第一个参数是正则表达式 replaceAll中需要注意的特殊字符: \ == \\\ ...

  7. 47.serch基本语法

    主要知识点 1._search api基本语法 2.http协议中get请求带上request body     一.search api的基本语法     1.GET /_search {所传递的参 ...

  8. 我理解的数据结构（三）—— 队列（Queue）

    我理解的数据结构(三)-- 队列(Queue) 一.队列 队列是一种线性结构 相比数组,队列对应的操作是数组的子集 只能从一端(队尾)添加元素,只能从另一端(队首)取出元素 队列是一种先进先出的数据结 ...

  9. Redis 应用场景【商品拼团抢购】

    使用到 redis-list llen 命令:获取列表的长度,如果列表key不存在那么也是返回0,如果给的key不是一个列表类型会返回一个错误 lpush命令:将值插入到列表头部,如果 key 不存在 ...

  10. lucene_07_solr使用IK分词器

    使用IKAnalyzer 中文分析器.. 第一步: 把,IKAnalyzer2012FF_u1j 添加到sol/WEB-INF/lib 目录下. 第二步: 复制IKAnalyzer 的配置文件和自定义 ...