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

How to limit the value range of object keys in TypeScript

When we use TypeScript, we want to use the type s...

Vue uses v-model to encapsulate the entire process of el-pagination components

Use v-model to bind the paging information object...

Detailed troubleshooting of docker.service startup errors

Execute the following command to report an error ...

More Features of the JavaScript Console

Table of contents Overview console.log console.in...

Vue implements an Input component that gets the key display shortcut key effect

I encountered a requirement to customize shortcut...

Hyper-V Introduction and Installation and Use (Detailed Illustrations)

Preface: As a giant in the IT industry, Microsoft...

Detailed explanation of efficient MySQL paging

Preface Usually, a "paging" strategy is...

Solution to the problem of installing MySQL compressed version zip

There was a problem when installing the compresse...

Linux common commands chmod to modify file permissions 777 and 754

The following command is often used: chmod 777 文件...

Detailed explanation of two quick ways to write console.log in vscode

(I) Method 1: Define it in advance directly in th...

Solution to no Chinese input method in Ubuntu

There is no solution for Chinese input method und...

CentOS 8 is now available

CentOS 8 is now available! CentOS 8 and RedHat En...

Summary of the differences between Vue's watch, computed, and methods

Table of contents 1 Introduction 2 Basic usage 2....

Detailed explanation of JSONObject usage

JSONObject is just a data structure, which can be...

About the problem of writing plugins for mounting DOM in vue3

Compared with vue2, vue3 has an additional concep...