Show Me The CodeHTMLElement.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 effecthtml <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 PSIn addition, if you want to insert above, just change this.appendChild(fragment); in the code to this.insertBefore(fragment, this.firstChild); Another approachvar 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:
|
<<: How to set up the terminal to run applications after Ubuntu starts
>>: How InnoDB cleverly implements transaction isolation levels
There is a table user, and the fields are id, nic...
The specific method of installing CentOS 7.0 on V...
1. Installation environment Docker supports the f...
Copy code The code is as follows: li {width:300px...
Table of contents 1. Create objects by literal va...
Baidu Cloud Disk: Link: https://pan.baidu.com/s/1...
Preface In daily work or study, it is inevitable ...
When the page is not responding, displaying the l...
A web server can build multiple web sites with in...
Pull the image # docker pull codercom/code-server...
I rewrote my personal website recently. I bought ...
In MySQL, most indexes (such as PRIMARY KEY, UNIQ...
Achieve results Implementation Code <h1>123...
The development of Docker technology provides a m...
1. Add Maria source vi /etc/yum.repos.d/MariaDB.r...