Shulou(Shulou.com)06/03 Report--

This article is about how to dynamically generate HTML elements and append attributes to them. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

There are three ways to dynamically generate HTML elements:

The first: document.createElement () creates an element, and then uses the appendChild () method to add the element to the specified node

Add an element:

Var link = document.createElement ('a'); link.setAttribute ('href','#'); link.setAttribute (' id','login'); link.style.color = 'green'; Link [XSS _ clean] =' login'; var main = document.getElementById ('main'); main.appendChild (link)

Second: use innerHTML to add elements directly to the specified node:

Var link = document.createElement ('a'); / / add elements directly to the specified node using innerHTML [XSS _ clean] = "login"

The third kind: jQuery creates nodes

Create a DOM object in jQuery using the factory function $() of jQuery in the following format:

$(html)

$(html) creates a DOM object based on the passed HTML tag string, wraps the DOM object into a jQuery object and returns.

Insert the created node into the text in jQuery, using methods such as append ()

The following methods are used to insert nodes in jQuery:

1.append (): appends content to the inside of each matching element

2.appendTo (): appends all matching elements to the specified element, reversing the regular $(A) .append (B) method, instead of appending B to A, appending A to B.

3.prepend () method: prepends content to the inside of each matching element

4.prependTo (): prepends all matching content to the specified element, reversing the prpend () method

5.after () inserts content after each matching element

6.insertAfter () inserts all matching elements after the specified element, reversing the after () method

7.before () inserts content before each matching element

8.insertBefore () inserts each matching element before the specified content, reversing the before () method

$(function () {var $link=$ ('login'); $('# main'). Append ($link);})

Javascript dynamically appends html elements

There are mainly two options:

1. Use DOM

/ use createElement to create the element var dialog = document.createElement ('p'); var img = document.createElement ('img'); var btn = document.createElement (' input'); var content = document.createElement ('span'); / / add class dialog.className =' dialog'; / / attribute img.src = 'close.gif'; / / style btn.style.paddingRight =' 10px' / / text span [XSS _ clean] ='do you really want GG?' ; / / put other elements in the container element dialog.appendChild (img); dialog.appendChild (btn); dialog.appendChild (span); 2. Use html templatevar popContent = [','',''+ formedName+'',''] .join (''); $('.document') .append (popContent)

Or write it this way.

Var popContent ='+ formedName+''+'; $('.document') .append (popContent); Thank you for reading! On "how to dynamically generate HTML elements and add attributes to the element" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.