I did a project before. I can't write code with jQuery, but I can only write and insert it with native JS. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
div {
border: solid 1px red;
}
</style>
</head>
<body>
<div id="test">current div</div>
</body>
<script>
window.onload = function () {
//define what text will display
var Before = "js insert before";
var Center = "js insert in";
var After = "js insert after";
//get the only element in your body
var current = document.getElementById("test");
//define the 'before' demo div
var newNodeBefore = document.createElement("div");
newNodeBefore.innerHTML = Before;
current.parentNode.insertBefore(newNodeBefore, current);
//define the 'middle' demo div
var newNodeCenter = document.createElement("div");
newNodeCenter.innerHTML = Center;
current.appendChild(newNodeCenter);
//define the 'after' demo div
var newNodeAfter = document.createElement("div");
newNodeAfter.innerHTML = After;
current.parentNode.insertBefore(newNodeAfter, current.nextSibling)
}
</script>
</html>
I used to use Jquery to complete the above tasks, but now the times have changed, and what JQuery can do can now be done with JavaScript. JQuery finally withdrew from the stage of history.