js图片加载状态 es5函数继承-构造函数的继承(2) es5函数继承-非构造函数的继承 jsError:UnexpectedtokeniinJSON js经常变脸的this js计算随机字符串 es5构造函数基础 js柯里化编程 js生成36位随机字符串 js跨域ajax请求获取传递的cookie js获取元素相对于屏幕的位置 js格式化获取到的日期对象xxxx-xx-xxxx:xx js函数式编程 js把url上的参数序列化为对象 js实时预览选择的图片文件 js中的深拷贝与浅拷贝 js函数的prototype属性 js获取浏览器滚动条高度scrollTop js类数组转数组 js改变select元素的值 js千分位加逗号的方法 es5函数继承-构造函数的继承(3) js表单提交的那些事儿 jscookie的作用域 js获取元素计算后的样式 js中的innerHTML方法 js获取DOM元素的方法 jsES5与ES6中的for循环 js向textarea输入tab字符 jsdisplay:none的input元素会默认添加到表单中提交吗 js解读-Function.prototype.apply.call() 认识javascript 在页面中插入JS代码 JS语句和代码块 JS的注释让浏览器显示不同的弹窗在页面中输出一些信息浏览器中的开发者工具 JS中的变量 JS中的原始数据类型 JS中的引用数据类型原始和引用数据类型的区别 JS中的算数运算符 JS中的赋值运算符 JS中的比较运算符 JS中的逻辑运算符 JS中的三元运算符运算符的优先级 JS中数据类型的转换 JS流程控制语句之if-else 数据类型的隐式转换 JS流程控制语句之switch JS流程控制语句之for循环在浏览器中调试JS代码 JS流程控制语句之for循环案例 JS流程控制语句之while循环 JS流程控制语句之do-while循环 JS中函数的声明与使用 JS中函数的参数 JS中函数的arguments JS中函数的返回值 JS中的纯函数 JS中的作用域 JS语句的执行顺序 JS语句的执行顺序2 神奇的this 神奇的this(补充) 改变函数的this 构造函数函数的继承函数的prototype属性对象的创建和使用处理代码错误和Error对象数组的声明和使用数组的length属性新增或删除数组中的元素合并多个数组内容 for循环遍历数组 map方法遍历数组 forEach方法遍历数组 every和some遍历数组 includes方法查找元素 indexOf和lastIndexOf方法查找元素 find和findIndex方法查找元素 filter方法筛选元素 sort方法对数组排序 reverse方法翻转数组元素顺序 reduce和reduceRight统计元素 slice提取数组元素数组方法总结字符串的声明和使用字符串的长度length 在字符串中提取字符在字符串中查找字符转换字符串大小写去除字符串前后的空格拼接和分割字符串替换字符串 Number对象及其运用 Math对象及其运用 Date对象及其运用全局函数编码和解码字符串把字符串转为数字判断目标是否是数字正则表达式任意一个字符的集合表示数量的符号元数据符号正则中的或表示边界的符号记住匹配项和非捕获匹配正向和反向查找正向肯定和否定查找贪婪和非贪婪模式 webAPI中的BOM和DOM window对象打开或关闭新窗口设置当前窗口的名称获取当前窗口的打开状态获取浏览器的位置和尺寸操作窗口滚动条设置和取消定时器 navigator对象 location对象 History对象 Document对象 DOM节点创建修改或删除节点检查节点获取元素节点获取元素节点两种方式的区别往元素中插入内容修改元素内容获取元素节点的尺寸和位置信息获取或修改元素标签上的属性获取和修改元素class属性关于元素标签属性的一些方法获取元素的CSS样式设置元素的CSS样式 js操作元素样式实现css过渡的案例操作class实现css过渡的案例连续操作元素样式的案例星星案例事件给对象添加监听事件和侦听函数单个元素添加多个监听事件单个事件添加多个侦听函数事件流设置一次性的侦听函数案例-插入多个li元素移除侦听函数案例-取消侦听函数案例-改变图片元素路径案例-切换多张图片显示状态事件对象获取触发事件的对象和监听对象委托事件判断事件是否会向上冒泡鼠标进入和离开元素事件阻止事件向上冒泡阻止后添加的侦听函数执行阻止事件的默认行为案例-图片轮播案例-图片自动轮播案例-图片导航案例-点击导航后取消自动轮播模拟触发事件快速模拟触发事件判断事件是否被人为触发自定义事件点击事件的特有属性元素滚动事件判断元素的滚动方向表单提交事件和重置事件焦点事件输入框内容改变事件下拉框选项改变事件单选框状态改变事件多选框状态改变事件表单控件值发生改变事件判断页面滚动方向带滚动效果的轮播图带滚动效果的轮播图2 带滚动效果的轮播图3 判断元素是否在可视区域内数字递增效果 JS的逻辑运算符&&和||中发生了什么 JS语法整理补充

js中的innerHTML方法

[ JS基础 ]

使用原生 JS 操作 DOM 的时候，我们经常使用 innerHTML 去插入新的元素，但这种方法是不可取的

1
2
3

<div>
    <p></p>
</div>

假设我们有上面的两个 DOM 元素，我们想在 p 元素后面插入一个新的元素，然后把 p 元素的颜色改为红色，通过innerHTML我们会这样做

var oD = document.querySelector('div');
var oP = document.querySelector('p');
oD.innerHTML += '<a>href</a>'; // 注意：这里用的是  +=
oP.style.color = 'red';

这段代码表面上看起来，是没有问题的，应该能实现我们的目的，但是在浏览器中打开，却发现 a 元素确实插入进去了，但是 P 元素的颜色却没有修改成功，这是为什么呢？

因为通过 innerHTML 插入的内容后，显示的 P 元素已经不是当初的 P 元素了，而我们的oP，表示的是我们的更新之前的元素，虽然给他设置了颜色，但是它已经不在 DOM 中，我们看不到了。

那么我们用什么呢？除了 innerHTML，js 还提供了许多操作 DOM 元素的方法，比如我们可以使用appendChild方法来插入我们新的a元素

var oD = document.querySelector('div');
var oP = document.querySelector('p');
var oA = document.createElement('a');
oD.appendChild(oA);
oP.style.color = 'red';

现在就完全达到我们的目的了，既插入了新的元素，又改变了 p 元素的颜色。