JS实现jQuery的append功能
作者:Beater 发布时间:2024-04-22 22:23:00
标签:js,append,jQuery
目录
Show Me The Code
测试下效果
效果
PS
另一种方法
Show Me The Code
HTMLElement.prototype.appendHTML = function(html) {
let divTemp = document.createElement("div");
let nodes = null;
let fragment = document.createDocumentFragment();
divTemp.innerHTML = html;
nodes = divTemp.childNodes;
nodes.forEach(item => {
fragment.appendChild(item.cloneNode(true));
})
// 插入到最后 append
this.appendChild(fragment);
// 在最前插入 prepend
// this.insertBefore(fragment, this.firstChild);
nodes = null;
fragment = null;
};
测试下效果
html
<style>
.child {
height: 50px;
width: 50px;
background: #66CCFF;
margin-bottom: 1em;
}
</style>
<div id="app">
<div class="child">
<div class="child">
</div>
js
let app = document.getElementById('app');
let child = `<div class="child">down</div>`;
app.appendHTML(child);
效果
PS
另外, 如果想实现在上方插入的话, 只需要把代码里的this.appendChild(fragment); 改为 this.insertBefore(fragment, this.firstChild);
另一种方法
var div2 = document.querySelector("#div2");
div2.insertAdjacentHTML("beforebegin","<p>hello world</p>");//在调用元素外部前面添加一个元素
div2.insertAdjacentHTML("afterbegin","<p>hello world</p>");//在调用元素的内部添加一个子元素并取代了第一个子元素
div2.insertAdjacentHTML("beforeend","<p>hello world</p>");//在调用元素内部后面添加一个子元素 即取代了最后的子元素
div2.insertAdjacentHTML("afterend","<p>hello world</p>");//在调用元素的外部后面添加一个元素
浏览器的渲染的效果:
此方法是ie 的最早的方法所以兼容性特别好
来源:https://juejin.cn/post/6966884363363418126
0
投稿
猜你喜欢
- 最近经常有收到MySQL实例类似内存不足的报警信息,登陆到服务器上一看发现MySQL 吃掉了99%的内存,God !有时候没有及时处理,内核
- 在使用TensorFlow训练神经网络时,首先面临的问题是:网络的输入此篇文章,教大家将自己的数据集制作成TFRecord格式,feed进网
- vscode是一款非常轻量级的编辑器,你可以通过安装甚至自己编写一些小的插件来满足各种不同的使用需求,使用起来非常简介方便。方式一:图形安装
- 1,不用第三方库# coding: utf-8import loggingBLACK, RED, GREEN, YELLOW, BLUE,
- 前言在所有编程语言中都涉及到大量的字符串操作,可见熟悉对字符串的操作是何等重要。本文通过示例详细介绍了Go语言实现字符串切片赋值的方法,感兴
- Python中的任何序列(可迭代的对象)都可以通过赋值操作进行拆分,包括但不限于元组、列表、字符串、文件、迭代器、生成器等。1.元组拆分元组
- 在python开发的过程中,经常会遇到需要打印各种信息。海量的信息堆砌在控制台中,就会导致信息都混在一起,降低了重要信息的可读性。这时候,如
- 基本开发环境· Python 3.6· Pycharm相关模块使用import requestsimport timefrom tkinte
- 1 注释符注释是指程序代码中不执行的文本字符串,是对程序的说明,可以提高程序的可读性,使程序代码更易于维护,一般嵌入在程序中并以特殊的标记显
- 前言使用python做一个加密资料的软件,可加密应用程序、文件、压缩包等多种文件格式,不可直接加密文件夹,可以先用压缩包打包在加密。加密后的
- 介绍MySQL 数据类型中的 integer types 有点奇怪。你可能会见到诸如:int(3)、int(4)、int(8) 之类的 in
- 1、说明(1)写函数时,可以为每个参数指定默认值。当调用函数为参数提供实际参数时,Python将使用指定的实际参数;否则,将使用参数的默认值
- 使用MSSQL的站长朋友都会被MSSQL数据库吃内存的能力佩服得五体投地,一个小小的网站,运行若干天之后,MSSQL就会把服务器上所有的内存
- Python中,列表是可以进行修改的:赋值、删除元素、分片等等。在给列表添加元素时,有两个常见的方法:append和extend。appen
- Python中的random函数random模块提供生成伪随机数的函数,在使用时需要导入random模块1. random.random()
- 1.window.event兼容脚本 2.屏蔽Form提交事件 3.获取事件源 4.添加事件兼容写法 5.Firefox注册innerTex
- 2.彻底弄懂CSS盒子模式二(导航栏实例) 3.彻底弄懂CSS盒子模式三(浮动的表演和清除的自述) 4.彻底弄懂CSS盒子模式四(绝对定位和
- 一、Background当想将照片序列合成延时摄影视频时,可能会发现照片中缺少一张,或者照片序列是跨时间、并不连续的,如图1所示,但PR中只
- 本文实例讲述了Django框架模型简单介绍与使用。分享给大家供大家参考,具体如下:ORM介绍ORM Object relational ma
- 1) 创建配置文件和帐户 (创建一个配置文件和配置数据库邮件向导,用以访问配置数据库邮件管理节点中的数据库邮件节点及其上下文菜单中使用的帐户