In some dynamic websites, there are new interface content that pops up after scrolling different subtitles selection, but there is no relevant content when looking at these webpage codes. Only by reviewing the elements can you see prompts such as before. This is dynamically added to the webpage How is the new html tag element implemented?
js example:
There are appendChild() method and insertBefore() method in the js code to add new nodes to the page.
appendChild(): means to insert a new node at the beginning of the specified element
nsertBefore(): means to insert a new node at the end of the specified element
Example 1:
<div id="aaa"></div>
<script type="text/javascript">
var duanluo = document.createElement("p");
var newstr = document.createTextNode("xxxx new content");
duanluo.appendChild(newstr);
document.getElementById("aaa").appendChild(duanluo);
</script>
Create a paragraph node and define it as duanluo, then create a text node and set the content to "xxxx new content", add the text node to the paragraph node, and then display it in the div element whose tag id is aaa.
The appendChild method can add a new child node to the end of the child node list of the current node, and the insertBefore() method can add a new child node to the beginning of the child node list of the specified node.
The usage is as follows:
insertBefore (the newly inserted node, the node that needs to insert the new node)
The insertBefore method is the same as the appendChild method. They can insert the specified element and all the child nodes it contains into the specified position. The moved element will be deleted first, and then inserted into the new position.
If you need to delete a child node, then the parent element.removeChild (child node) can delete the existing element.
It is troublesome to use js code to directly manipulate web page elements. For more convenience, we can add a js plug-in jQuery. In the jQuery plug-in, there are many ways to easily manipulate html elements and content.
Example 2:
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
function tianjia(){
var txt1="New label content"; //Add new text
var ys1="<div class=\"ysjd\">Element List</div>";
$("#xianshi").append(txt1,ys1); //Add new elements
}
</script>
<div id="xianshi"></div>
<button onClick="tianjia();">Add new content</button>
Just click the Add New Content button to quickly add new div tags.
It should be noted that jQuery.js must be quoted before the code starts.
In the production of jquery plug-in, adding new div tag elements or text content is often used: prepend, append, before, after these methods.
prepend(): Add new element content at the beginning of the current parent element
$("#id").prepend("xxx text");
append(): Insert new content at the end of the current parent element
$("#id").append("xxx text");
before(): Insert a new element before the current label at the same level
$("#id").before("xxx text");
after(): add new content after the current sibling element
$("#id").after("xxx text");
The above are some front-end js code methods for dynamically adding new node elements to web pages.