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

Detailed explanation of mysql partition function and example analysis

First, what is database partitioning? I wrote an ...

Why Seconds_Behind_Master is still 0 when MySQL synchronization delay occurs

Table of contents Problem Description Principle A...

In-depth understanding of MySQL slow query log

Table of contents What is the slow query log? How...

Implementation of JavaScript downloading linked images and uploading them

Since we are going to upload pictures, the first ...

Detailed explanation of Vue's hash jump principle

Table of contents The difference between hash and...

Details of watch monitoring properties in Vue

Table of contents 1.watch monitors changes in gen...

Ubuntu 20.04 firewall settings simple tutorial (novice)

Preface In today's increasingly convenient In...

Detailed explanation of three relationship examples of MySQL foreign keys

This article uses examples to describe the three ...

Angular Cookie read and write operation code

Angular Cookie read and write operations, the cod...

Let's learn about the MySQL storage engine

Table of contents Preface 1. MySQL main storage e...

What to do if the online MySQL auto-increment ID is exhausted

Table of contents Table definition auto-increment...

MySQL sorting Chinese details and examples

Detailed explanation of MySQL sorting Chinese cha...

More Ways to Use Angle Brackets in Bash

Preface In this article, we will continue to expl...