

以往我们插入、移动DOM元素经常是使用appendChild和insertBefore方法。
appendChild:在父级元素内追加新元素。 insertBefore:在父级元素内的某个元素之前插入新元素。
但是这两个方法的参数只能接收元素对象,不能使用字符形式的html代码,而且它们插入元素的位置也不够灵活。我们可以使用insertAdjacentHTML方法来更方便的插入元素。
insertAdjacentHTML可以将字符串形式的html代码(需要能解析为DOM元素)解析为一个节点,并将其追加到指定元素的指定位置。
insertAdjacentHTML方法的语法如下:
element.insertAdjacentHTML(position, text);
position参数有以下四个值(都是字符串形式):
beforebegin:在元素的开始位置之前插入。 beforeend:在元素的结束位置之前插入。 afterbegin:在元素的开始位置之后插入。 afterend:在元素的结束位置之后插入。
text参数则是字符串形式的html代码。
根据position参数,我们可以将新元素插入到到指定元素的四个位置:
示例:
<div id="a"> <div></div> </div> <script type="text/javascript" defer> var a=document.querySelector("#a"); a.insertAdjacentHTML("afterbegin","<a href='' >xxx</a"); </script>
结果如下:
<div id="a"> <a href="">xxx</a> <div></div> </div>
insertAdjacentHTML方法的兼容性表现良好,主流浏览器均已支持。我们也可以如下语句来检查浏览器是否支持方法:
document.documentElement.insertAdjacentHTML
此外,由于insertAdjacentHTML是根据位置插入元素的,因此它不能把新元素插入到img、input等单标签元素里(想这么做的人才是有毛病吧)。
相关文档:《https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML》
ps:与insertAdjacentHTML系列“同一系列”的还有insertAdjacentElement方法和insertAdjacentText方法。
insertAdjacentElement方法除了第二个参数是DOM节点(不能是字符串形式)外和insertAdjacentHTML方法都一样。
insertAdjacentText方法则只接收字符串格式的参数,并输出为字符串。其他地方也和insertAdjacentHTML方法一样。
使用js的insertAdjacentHTML方法插入元素
很久以前我发过dsdoll娃娃的图片。有些实体娃娃打扮起来摄影还是很漂亮的嘛。今天有群员在群里发了张初音的图片,我凭借多年的经验,马上搜图找到了这娃娃的出处 (逃)
放些图片上来,有意的赶紧下单(滑稽)
一个初音版实体娃娃的图片
今天fgo开了圣诞活动,bilibili上的活动页面上下着雪,于是我把代码扒了下来。
这个下雪的js依赖jquery,实际使用中感觉效果一般←_←
<body style="background: #000;"> <canvas class="snow-canvas" speed="1" interaction="true" size="8" count="40" start-color="rgba(253,252,251,1)" end-color="rgba(251,252,253,0.3)" opacity="0.00001" wind-power="2" image="false"></canvas> <script src="//apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script> <script src="//static.biligame.net/fgo/event_santa/pc/js/snow.js?v=d659f803.js"></script> <script> $(".snow-canvas").snow(); </script> <style> .snow-canvas { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } </style> </body>
demo如下:
效果不是很好……不过如果像活动页面那样,有背景图片什么的,瑕疵应该不会很明显。
bilibili上使用的一个下雪效果
今天又在微博上看到两个摄影发的蕾姆COS照片,婚纱装还是很漂亮滴~(虽然作为婚纱来说穿的有点少)coser是魔法虾饺~
魔法虾饺的蕾姆COS 婚纱ver
今晚我想把电脑上一些png图片都转换文jpg格式,减少文件体积。我现在的看图软件XnView以前批量转换png的时候蓝屏过数次,现在我是不敢再用它转换了,只好临时抱佛脚再去网上找转换器。
现在我用的是2345图片批量转换器,感觉还算可以,能满足常见的转换要求。
从上面的链接下载下来的2345图片批量转换器是绿色版的,它的界面如下图所示。
2345图片转换器支持添加来自不同文件夹的文件,转换后可以把图片分别保存到该图片所在的原文件夹。
先在左上角添加或拖入要转换的文件/文件夹,再在左下角设置图片尺寸,再在右上角选择转换后的格式和向量设置,最后选择右下角的转换后操作。确认无误后就可以开始转换了。
(左下角的使用完整版什么的别点,点了就安装2345好压了)
不过2345图片转换器也有个缺陷,比如你有一个文件夹,里面有jpg和png格式的图片,只想转换png的。这个转换器没这个功能,我们只能先把要转换的png格式的图片筛选出来(可以使用资源管理器搜索或者everything搜索),再把搜索出来的png文件选中,拖到2345图片转换器里。
另外这2345图片转换器转换完成后会自动关闭。
顺便求大家推荐其他好用的图片转换器~
Read More →
2345图片批量转换器
港中普通版,全彩说明书,带纯真晚礼服特典。可惜我是国行勇士用不了……
顺便吐槽下大王的造型我就是爱不起来啊。
晚上回去玩玩=。=
买了psv的《Fate/EXTELLA》
图片P站id=60142920
[桜都字幕组]2016年12月里番合集
magnet:?xt=urn:btih:9150B382EE3D301094CCB80B2DACA7BAB1101DAE
Read More →