Common Methods for jQuery to dynamically create html elements, jquery Dynamic html elements

Common Methods for jQuery to dynamically create html elements, jquery Dynamic html elements

This example describes how to use jQuery to dynamically create html elements. It is useful when using jQuery for WEB programming. Share it with you for your reference. The specific method is as follows:

Generally, you can dynamically create html elements in the following ways:

1. Use jQuery to create element syntax
2. Store dynamic content in an array, and traverse the array to dynamically create html elements.
3. Use templates

1. Use jQuery to dynamically create elements and append them to jQuery objects.

<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <title> </title> <script src =" Scripts/jquery-1.10.2.js "> </script> <script type =" text/javascript "> $ (function () {$ ('<input/>', {id: 'cbx', name: 'cbx', type: 'checkbox', checked: 'checked', click: function () {alert ("Click me now ~~ ");}}). AppendTo ($ ('# wrap '));}); </script> 
Shows the running effect:

2. first put the content in the array, then traverse the array and splice it into html
 
Shows the running effect:

3. Use a template to generate html
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <title> </title> <script src =" Scripts/jquery-1.10.2.js "> </script> <script type =" text/javascript "> $ (function () {var a = buildHTML ("a", "I am generated by a template", {id: "myLink", href: "http://www.baidu.com "}); $ ('# wrap1 '). append (a); var input = buildHTML ("input", {id: "myInput", type: "text", value: "I also generated by the template ~~ "}); $ ('# Wrap2 '). append (input) ;}); buildHTML = function (tag, html, attrs) {// you can skip html param if (typeof (html )! = 'String') {attrs = html; html = null;} var h = '<' + tag; for (attr in attrs) {if (attrs [attr] = false) continue; h + = ''+ attr + '="' + attrs [attr] + '"';} return h + = html? ">" + Html + "</" + tag + ">": "/> ";}; </script> 
Shows the running effect:

I believe this article provides some reference for you to use jQuery for WEB programming.

How to operate HTML elements using jQuery
JQuery Selector

The jQuery element selector and attribute selector allow you to select HTML elements by Tag Name, attribute name, or content.
The selector allows you to operate on HTML element groups or individual elements.
In html dom terminology:
The selector allows you to operate a DOM element group or a single DOM node.

Selector instance Selection

* $ ("*") All elements
# Id $ ("# lastname") id = "lastname" element
. Class $ (". intro") All class = "intro" Elements
Element $ ("p") All <p> Elements
. Class. class $ (". intro. demo") All class = "intro" and class = "demo" Elements
 　　 　　 
: First $ ("p: first") first <p> element
: Last $ ("p: last") last <p> element
: Even $ ("tr: even") All even <tr> Elements
: Odd $ ("tr: odd") All odd <tr> Elements
 　　 　　 
: Eq (index) $ ("ul li: eq (3)") The fourth element in the list (index starts from 0)
: Gt (no) $ ("ul li: gt (3)") list elements with an index greater than 3
: Lt (no) $ ("ul li: lt (3)") list elements whose index is less than 3
: Not (selector) $ ("input: not (: empty)") All input elements not empty
 　　 　　 
: Header $ (": header") All title elements : All animation elements of animated
 　　 　　 
: Contains (text) $ (": contains ('w3school')") contains all elements of the specified string
: Empty $ (": empty") all elements of nodes without child (element)
: Hidden $ ("p: hidden") All hidden <p> Elements
: Visible $ ("table: visible") all visible tables
 　　 　　 
S1, s2, s3 $ ("th, td,. intro") All elements with matching Selection
 　　 　　 
[Attribute] $ ("[href]") All elements with the href attribute
[Attribute = value] $ ("[href = '#']") the value of all href attributes is equal to the element "#".
[Attribute! = Value] $ ("[href! = '#'] ") The value of all href attributes is not equal to" # & quot ...... the remaining full text>

The code in JQuery cannot respond to the click event of dynamically generated html elements. How can this problem be solved?
You can change your mind to solve this problem.
Do not listen to dynamic html elements. You can listen to the parent nodes of these elements, and then use the jQuery is method to determine whether the elements are desired.
Attached example
<Body>
<Script type = "text/javascript">
$ (Function (){
$ ("# Aaa"). click (function (e ){
If(((e.tar get). is (". bbb ")){
Alert (1 );
};
});
});
</Script>
<Table id = "aaa" border = "1">
<Tr>
<Td> <input type = "button" class = "bbb" value = "sadasd"> <a href = "javascript: void (0) "class =" bbb "> asdasd </a> </td>
</Tr>
<Tr>
<Td> <input type = "button" class = "bbb" value = "sadasd"> <a href = "javascript: void (0) "class =" bbb "> asdasd </a> </td>
</Tr>
</Table>
</Body>