本节主要内容介绍如何使用脚本向前端页面插入按钮或者小框架等元素。 最后给B站制作一个真正的一键三联按钮。（有兴趣的话也可以写一个二联按钮，太费币了TT）
有兴趣的朋友可以列个评论清单以供实际使用。 本来想在这一部分做的，但是篇幅有限，所以暂时放弃了。 如果您愿意，可以提出反馈，我会安排在下一部分。
（本来想再做一个弹幕列表页，但是觉得太难了，不适合做教程。）
脚本向页面添加新元素。 经常会看到需要脚本向页面添加新元素的情况。 例如，百度云脚本会在页面中添加一些解析链接等按钮，还有一些助手类型会在页面中添加一些小窗口。 、显示脚本的运行状态等
如果你想要一个脚本向页面添加新元素，原理很简单。
第一次使用。 创建要插入的元素，例如按钮。 （“”）。 如果你有很多想要放入的组件，你可以使用。 ("div")，然后直接在里面写HTML代码。
然后找到你要插入的位置，使用 / 或其他方法插入你的。 然后就可以在F12开发者工具中看到我们插入的内容了。
,,,,具体的方法和区别可以在百度上搜索查看文档（其实我觉得麻烦，整理一下再写一篇）
就像下面的代码一样，插入到最后
当然，上面是方法。 比如有些网页是自带的，所以可以使用$("
html代码
") 创建元素，然后使用 ". 本系列内容依然采用原生元素进行讲解和使用。
新元素的事件监听元素已添加，但只能查看，不能使用。 那么有什么用呢？ 所以我们需要监控我们的元素事件。 最常用的是点击事件。 单击我们的按钮，让我们的脚本做出一些反应。
如果是类似按钮的话，我们可以这样写。 这是一种直接使用方法。
let btn=document.createElement("button");
btn.innerHTML="按钮文字,其实也可以写html,变成下面的样子(不过谁用按钮来包那么多html标签呢)";//innerText也可以,区别是innerText不会解析html
btn.onclick=function(){
//code
alert("点击了按钮");
}
document.body.append(btn);如果是div的话，你可以在里面写你喜欢的HTML，可以使用下面的方法。 活动详情：活动
let div=document.createElement("div");
div.innerHTML='span1span class';
div.onclick=function(event){
if(event.target.id=="span-1"){
alert("span-1被点击了");
}else if(event.target.className=="sp"){
alert("sp这一类被点了");
}
};
document.body.append(div);
至于为什么会有这样的差异，简单来说，在前一种方法中我们只监控一个元素，所以我们肯定知道这只能是执行的操作。
后来因为包含多个元素，我们就可以从事件中找到实际被点击的元素，通过id或者class来判断，来跟随我们的脚本执行流程。
另外，我想补充一点，上面可以重写为（“点击”），类似于下面。
div.(“点击”,(ev){
.log(ev);
});
主要区别在于您只能绑定一个事件，但可以绑定多个事件。 这就涉及到前端的内容了。 课后你可以看一下说明。 还有其他绑定事件的方法，但这里不一样。 已列出其中之一。
建议监听页面已经存在的按钮，防止原来的按钮事件被覆盖（如果也使用按钮），视情况而定。
而且它也可能是假的； 使得事件不再向上传递。 （有点牵强，所以我只是随口提了一下，加了一些脚本开发技巧，就像补充内功一样，防止踩坑，万一遇到了，不可能事事都完全按照教程来。如果有兴趣，可以在课外详细学习，也可以跳过来获得印象。）
新元素的风格
为了网页中好看或者不显得突兀，我们可以添加网页自带的类或者自己写一些样式，类似如下：
btn.className="default-btn";//添加class
btn.id="submit-btn";//添加id
btn.style.color="#ff0000";//给按钮写style样式,查看这个文档,看css与JavaScript的对应:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
div.innerHTML='span1span class';//在html里写style
真正的一键三连 说完上面的内容，我们来做点实际的事情吧。 我希望在页面的收藏按钮和分享按钮之间添加一个三连按钮。
我们可以先通过F12开发者工具找到这块的元素，发现使用了span。 对于同样的外观，我们可以使用span来创建。 然而！ 为了方便，我们还是用它，你也可以把它作为课后作业来完善。 （其实没有图标，只是用按钮）
创建代码如下：
let triple=document.createElement("button");
triple.innerText="三连";
triple.style.background="#757575";//颜色弄得差不多吧
triple.style.color="#fff";
triple.onclick=function(){
//三连代码
};
将父节点插入到我们可以找到 share 的位置，然后使用它在 share 之前插入我们的三重按钮。 代码如下：
让 share=.('.share');
分享..（，分享）；
emmmm太丑了，就这样吧，功能还好
不过这样直接插入是不行的。 最终的代码与此类似。 它比较复杂，需要一些 DOM 知识才能理解。 我暂时不展开。 也可以用得更猛烈一点，等一会儿再插入，把run-at设置为-end。
let ops=document.querySelector('#arc_toolbar_report .ops');
//插入三连之后好像会重新生成,不添加就不会重新生成,暂时没弄清什么情况,先这样处理了.
//主要作用是监听ops的DOMNodeInserted事件,等它修改完成之后再插入我们的三连按钮,另外注意run-at是document-end,要等待ops生成之后再监听,不然query返回null会报错
//这个事件会多次调用,但是我们insertBefore插入如果元素存在,只是修改而不会新增
ops.addEventListener("DOMNodeInserted", function(event) {
let share=document.querySelector('.share');
share.parentElement.insertBefore(triple,share);
});
然后我们就可以长按拇指来抓取连续的三个http请求，就像上一节的ajax自动跟随up主一样。
aid是我们的视频ID，csrf就在里面。 这里就不详细说了，因为我们是在页面上，所以不需要使用GM跨域（所以我的grant是none，也不需要沙箱环境。另外，还挺使用起来比较麻烦），也可以直接获取csrf，使用xhr请求接口即可。 代码如下：
let httpRequest = new XMLHttpRequest();
httpRequest.open('POST', 'https://api.bilibili.com/x/web-interface/archive/like/triple');
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpRequest.withCredentials = true;//设置跨域发送带上cookie
let aid=window.__INITIAL_STATE__.aid;
let sKey="bili_jct";
let csrf=decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
//上面这一段就是取出csrf,在cookie里面是bili_jct,这一段我是直接copy的,总之获取到就好了啦
httpRequest.send('aid='+aid+'&csrf='+csrf);
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState == 4 && httpRequest.status == 200) {
var json = JSON.parse(httpRequest.responseText);
console.log(json);
if(json.code==0){
alert("三连成功!刷新页面可见");
}else{
alert("三连失败/(ㄒoㄒ)/~~");
}
}
};上面的CSRF代码来自：。
结尾
我们的脚本这次使用 run-at 并 grant none 。 这是我们之前学过的。 你可以多注意一下。 最终的脚本代码将发送至脚本发布区。 你可以尝试一下，看看完整的代码。
三键演示
/-238-1-1.html
（来源：油猴中文网）
