浏览器 - 在元素前插入 HTML

2019-11-20

描述

在指定元素之前插入一个 HTML 字符串。

提示

使用位置参数为 beforebegin 的 el.insertAdjacentHTML() 方法将解析好的 htmlString 插入到 el 元素的前面
位置参数可选值如下：
- beforebegin 元素之前
- afterbegin 元素内部的第一个子节点之前
- beforeend 元素内部的最后一个子节点之后
- afterend 元素之后
- 具体表现为 beforebegin <tag> afterbegin ... beforeend <tag> afterend
类似的方法有：insertAdjacentText、insertAdjacentElement()

代码

const insertBefore = (el, htmlString) => el.insertAdjacentHTML('beforebegin', htmlString);

示例

在指定元素之前插入内容为 before 的 p 元素：

`insertBefore(document.getElementById('myId'), '<p>before</p>'); // <p>before</p> <div id="myId">...</div>`

返回总目录

每天 30 秒系列之 JavaScript 代码

js 代码片段模拟 window.prompt 函数

众所周知，思源不支持 prompt，确切的说 Electron 不支持。但有时写脚本时确实需要一些交互式操作，如果使用思源 api 调用 Dialog 确实可以实现，但终究是麻烦了些。就自己动手写了一个 prompt 模拟函数，放到 js 代码片段中即可，然后需要的时候就可以直接调用了。效果 [图片] [图片] ..

分享思源代码片段调试技巧

前言思源的代码片段很强大，有了它你几乎可以无所不能。但，你是不是也感受到了一点点烦恼？输入框不仅小，还每次调试都要先打开设置，再粘贴到输入框中。如果你是开发者，频繁的打开和调试，你是不是开始感到有些心累？有没有一种办法，不需要频繁的打开也能进行调试预览呢？答案是肯定的。我在不断的打开与关闭的痛苦中摸索出了一些 ..

对键进行重命名

2020-08-20 描述根据提供的键值对将对象中的多个键进行重命名。提示在 Object.keys() 的返回值上使用 Array.prototype.reduce() 以获取对象的所有键通过扩展运算符（...）和 keysMap 对其匹配的键进行重命名代码 const renameKeys = (keys ..

浅克隆

2020-08-21 描述为一个对象进行浅克隆。提示使用 Object.assign() 和空对象（{}）为原始对象创建一个浅克隆代码 const shallowClone = obj => Object.assign({}, obj); 示例浅克隆一个对象： const a = { x: true, ..

将一个对象转换为由键值对数组组成的二维数组

2020-08-25 描述从一个对象或其他迭代（对象，数组、字符串、集合等）中创建一个由键值对数组组成的数组。提示检查 Symbol.iterator 是否被定义如果是的话，使用 Array.prototype.entries() 为给定的可迭代对象获取他的迭代器使用 Array.from() 将结果转换为一 ..

获取各类型值的长度

2020-08-24 描述获取一个数组、对象或字符串的长度。提示获取 val 的类型（array，object 或者 string）数组使用 length 属性如果 length 或者 size 可用的话就使用他们，否则的话使用对象拥有键的数量如果 val 为字符串的话就使用其创建一个 Blob 对象，然后 ..

根据函数动态选取需要的键值对

2020-08-19 描述当每一个键值对使用给定的函数返回真值时，就将他们组合成一个新的对象。该函数调用两个参数：（值，键）。提示使用 Object.keys(obj) 和 Array.prototype.filter() 来移除 fn 返回假值的键值对使用 Array.prototype.reduce() 将 ..

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

关于