JS implements jQuery's append function

JS implements jQuery's append function

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));
	})
	// Insert to the end append
	this.appendChild(fragment);
	// Insert prepend at the front
	// this.insertBefore(fragment, this.firstChild);
	nodes = null;
	fragment = null;
};

Test the effect

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);

Effect

PS

In addition, if you want to insert above, just change this.appendChild(fragment); in the code to this.insertBefore(fragment, this.firstChild);

Another approach

var div2 = document.querySelector("#div2");
  div2.insertAdjacentHTML("beforebegin","<p>hello world</p>");//Add an element before the calling elementdiv2.insertAdjacentHTML("afterbegin","<p>hello world</p>");//Add a child element inside the calling element and replace the first child elementdiv2.insertAdjacentHTML("beforeend","<p>hello world</p>");//Add a child element after the calling element and replace the last child elementdiv2.insertAdjacentHTML("afterend","<p>hello world</p>");//Add an element after the calling element

The effect of browser rendering:

This method is the earliest method of IE, so the compatibility is particularly good

The above is the details of JS implementing jQuery's append function. For more information about JS implementing jQuery append, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Analysis of four common methods of adding new content to jQuery [append, prepend, after, before]
  • Solve the problem that the element event added by jQuery using append is invalid
  • Comparison of jQuery append and appendTo methods
  • jQuery append elements append, prepend, before, after usage and difference analysis
  • Solution to the problem of jQuery selector causing append failure in IE7
  • jquery append dynamically added element event on does not work solution
  • jQuery uses append to add multiple contents at the same time after the html element
  • Solve the problem of binding events after Jquery appends new elements to the page
  • jQuery appendTo() method usage example
  • jQuery append() method usage examples

<<:  How to set up the terminal to run applications after Ubuntu starts

>>:  How InnoDB cleverly implements transaction isolation levels

Recommend

MySQL data duplicate checking and deduplication implementation statements

There is a table user, and the fields are id, nic...

VMware Workstation 14 Pro installs CentOS 7.0

The specific method of installing CentOS 7.0 on V...

Docker installation tutorial in Linux environment

1. Installation environment Docker supports the f...

Solution to large line spacing (5 pixels more in IE)

Copy code The code is as follows: li {width:300px...

Four ways to create objects in JS

Table of contents 1. Create objects by literal va...

Brief analysis of centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar

Baidu Cloud Disk: Link: https://pan.baidu.com/s/1...

Vue handwriting loading animation project

When the page is not responding, displaying the l...

HTTP and HTTP Collaboration Web Server Access Flow Diagram

A web server can build multiple web sites with in...

How to deploy code-server using docker

Pull the image # docker pull codercom/code-server...

Difference between MySQL btree index and hash index

In MySQL, most indexes (such as PRIMARY KEY, UNIQ...

Loading animation implemented with CSS3

Achieve results Implementation Code <h1>123...

How to deploy Spring Boot using Docker

The development of Docker technology provides a m...

MYSQL database GTID realizes master-slave replication (super convenient)

1. Add Maria source vi /etc/yum.repos.d/MariaDB.r...