Javascript dynamically add page elements and set attributes (div, li, img)

Web pages are made up of HTML tags layer by layer, JS can also dynamically add layers of such as Div, Li, img, such as tags. In fact, no matter what HTML tags, js dynamic creation of the same method, and then first from the dynamic Add div start.

One, js dynamic add element div

<div id= "Parent" ></div>

function Addelementdiv (obj) {
var parent = document.getElementById (obj);

Add Div
var div = document.createelement ("div");

Set div properties, such as ID
Div.setattribute ("id", "newdiv");

div.innerhtml = "js dynamically add div";
Parent.appendchild (DIV);
}

Call: Addelementdiv ("parent");

Second, JS dynamic add Li

<ul id= "Parentul" ><li> original li</li></ul>

function Addelementli (obj) {
var ul = document.getElementById (obj);

Add Li
var li = document.createelement ("Li");

Set the Li property, such as ID
Li.setattribute ("id", "Newli");

li.innerhtml = "js dynamic add Li";
Ul.appendchild (LI);
}

Call: Addelementli ("Parentul");

Three, JS dynamic add element img

<ul id= "Parentul" ></ul>

function addelementimg (obj) {
var ul = document.getElementById (obj);

Add Li
var li = document.createelement ("Li");

Add img
var img = document.createelement ("img");

Set the IMG property, such as ID
Img.setattribute ("id", "newimg");

Set up an IMG picture address
IMG.SRC = "/images/prod.jpg";

Li.appendchild (IMG);
Ul.appendchild (LI);
}

Call: Addelementimg ("Parentul");

now the more popular jquery

The code is as follows:

$ (' input '). Click (function () {
Handling code
});

Or

The code is as follows:

$ ('. ClickMe '). Bind (' click ', function () {
Bound handler called.
});

However, this can only be defined for an element that has already been loaded, and those elements that are added later will need to be bound separately. Even if you use jquery's clone function, it does not replicate events (so far I'm not sure why it is so defined, whether it can be copied or deliberately handled so as to prevent some exceptions, which has yet to be analyzed for jquery's source code).
Now, with live you can easily handle,

$ ('. ClickMe '). Live (' click ', function () {//Live handler called.}); In this way, even the elements that you insert dynamically later will be bound to the event, $ (' body '). Append (' <div class= ' ClickMe ">another target</div> ');
Definitions and usage
The live () method attaches one or more event handlers for the selected element, and provides a function to run when these events occur.

Event handlers that are attached through the live () method apply to the current and future elements of the matching selector, such as the new element created by the script.

Problem: Bind an event with the live () method of jquery, sometimes with repeated bindings, such as when a button is clicked and the event that the button binds to executes n times.

Workaround: Use the Die () method to unbind the previously bound event on this element before the live () method is bound, and then bind the new event through the Live () method.

JS Code
First through the Die () method, and then through Live () binding
$ ("#selectAll"). Die (). Live ("Click", Function () {
Event Run code
});
First through the Die () method, and then through Live () binding
$ ("#selectAll"). Die (). Live ("Click", Function () {
Event Run code
);d IE () method Introduction:

JS Code
Die ([Type], [fn]) <span style= "White-space:normal" > </SPAN>

Die ([Type], [FN])

Overview
JQuery 1.3 is new. This approach is exactly the opposite of live.

If no parameters are taken, all the bound live events will be removed.

You can unlock custom events that are registered with live.

If the type parameter is provided, the corresponding live event is removed.

If the second parameter function is also specified, only the specified event handler is moved.

Example

. jquery creation Element

function CreateDOM () {
var select = $ ("<select/>"). Appendto ($ ("body"));
var option1 = $ ("<option value=\" 1\ ">text1</option>"). Appendto (select);
var option2 = $ ("<option value=\" 2\ ">text2</option>"). Appendto (select);
var Option3 = $ ("<option value=\" 3\ ">text3</option>"). Appendto (select);
var text = $ ("<input type=\" text\ ">"). css ({"width": "150px", "Border": "1px Lightgrey Solid"}). Appendto ($ ("body") );
var checkbox = $ ("<input type=\" checkbox\ "/>"). Appendto ($ ("body"));
var ul = $ ("<ul/>"). Appendto ($ ("body"));
var li = $ ("<li>li1</li>"). APPENDTO (UL);
var li = $ ("<li>li2</li>"). APPENDTO (UL);

}