原生js 修改html,原生JS改变HTML内容

最近发现总是把原生JS语法和诸多框架库神马的语法搞混，打算暂时弃用各种库，回归到原生来，好好抠一抠所有的细节，跳一跳各种坑，才能飞得更远。PS. 突然想起冰火里面三眼乌鸦对布兰说的那句话——You’ll never walk………but you’ll fly. 期待看到布兰变龙(maybe)飞起来的那天~~~

well,快点回神！

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

几个容易混淆的用法：

1、innerHtml是标签内的文本,输入输出到该DOM内部纯HTML代码(流);

(获得td、div等html元素时候,它们是没有value或是text属性,只能用innerHtml)

2、value是表单元素特有的属性,输入输出的是转义文本(字符串);

(Button、CheckBox、Radio)随表单一起发送的值;

(Reset、Submit)标签;

(Text、Hidden)默认值;

(File、Password)

(注: Text控件用value有效)

3、html和text都是jquery/zepto的方法，只对jq对象有用

原生js 修改html,原生JS改变HTML内容相关推荐

原生js修改html,原生JS设置样式并恢复默认样式
HTML> javascript body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid 1px; pa ...
不用js实现鼠标放上去改变文字内容
css样式 .remind span {display:block;margin-top:-22px;} .remind a:hover {padding-top:22px;} .remind a { ...
js修改复制粘贴板上的内容（从网页复制表格的时候多复制了一行）
//在didmount生命周期里监听复制事件componentDidMount() {window.document.addEventListener("copy", this.c ...
原生js怎么追加html,原生JS改变HTML内容
最近发现总是把原生JS语法和诸多框架库神马的语法搞混,打算暂时弃用各种库,回归到原生来,好好抠一抠所有的细节,跳一跳各种坑,才能飞得更远.PS. 突然想起冰火里面三眼乌鸦对布兰说的那句话--You'l ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
原生js获取document_【JS 口袋书】第 9 章：使用 JS 操作 HTML 元素
作者:valentinogagliardi 译者:前端小智来源:github 这几天自己的公众号无套路送现金 200+,参与方式如下 OKR 与 KPI 的区别(文中无套路送现金 200+) 文档对 ...
在js对象上绑定js数组原生方法
在js对象上绑定js数组原生方法在js对象上绑定数组方法会给当前对象添加一个lenght:0属性例: var o = {}; [].pop.call(o) console.log(o)//返回结果 ...
原生遍历_前端原生写js代码还是用vue等框架写项目？
其实对于初入前端的同学来说,我个人推荐写原生.因为扎实的js基础是通过写原生代码逐步理解js的数据类型,语法,闭包,原型链,继承等知识,只有在项目中主动应用这些js的基本知识,才能逐步提高你的编码能力 ...
React Native之js调用Android原生使用Callback传递结果给js
如果不清楚js如何调用Android原生,可以先参考我的这篇博客React Native实现js调用安卓原生代码 1 问题上面的文章只是调用安卓原生显示Toast,但是我们一般会需要调用安卓的代码然 ...
React Native实现js调用安卓原生代码
1 问题实现js调用安卓原始代码,直接上代码,简单粗暴 2 代码实现 1) 实现一个继承ReactContextBaseJavaModule的类,MyToastModule.java文件如下 pub ...

原生js 修改html,原生JS改变HTML内容

原生js 修改html,原生JS改变HTML内容相关推荐

最新文章

热门文章