JavaScript dynamically creates tags with Ajax

JavaScript dynamically creates tags with Ajax

A: Introduction

The previous actions are for existing tags, and JavaScript can also dynamically create tags and generate new document combinations with existing markup. At the same time, it simply introduces Ajax.

Two: Dynamic creation of tags and combinations

Related methods:

/** * Some Old-shcool method */document.write ("str"); var node = document.getElementById (' id '); var htmlvalue = Node.innerh tml;node.innerhtml = htmlvalue;/** * DOM methods */var parent = document.getElementById (' id '); var node = Document.createel Ement (nodeName);p arent.appendchild (node), var txt = document.createtextnode ("Hello World");p ara.appendchild (TXT);/* * * Example: <p>this is <em>my</em> content.</p> *///1.  Create p and P ' s children elementsvar p = document.createelement ("P"); var txt1 = document.createTextNode ("This is"); var em = Document.createelement ("em"); var txt2 = document.createTextNode ("content."); /2. Create EM ' s child elementvar txt3 = document.createTextNode ("my");//assemble themp.appendchild (TXT1);p. appendchild (em );p. appendchild (TXT2); Em.appendchild (TXT3);/** * InsertBefore */parentelement.insertbefore (newelement, targetelement);/** * Insertafter,without exiting method, custom Create */function InsertAfter (newelement, targetelement ) {var ParentnodE = targetelement.parentnode;if (Parentnode.lastchild = = targetelement) {parentnode.appendchild (newElement);} else { Parentnode.insertbefore (newelement, targetelement.nextsibling);}}

Three: Ajax

Ajax (Asynchronous JavaScript and XML) asynchronous JavaScript and XML, which is used to interactively interact with the server in order to achieve a partial refresh of the page.

The AJAX implementation process:

/** * Ajax * 1. Create Request--xmlhttpobject * 2. Request.open ("Methodtype", url, isasynchronously); * 3. Request.onreadystatechange = function () {//key request.readystate = = 4} * 4. Request.send (parameter); * * Request.readystate has five possible values: * 0:uninitialized * 1:loading * 2:loaded * 3:interactive * 4:c             Omplete */function Gethttpobject () {if (typeof XMLHttpRequest = = "undefined") {XMLHttpRequest = function () { try {return new ActiveXObject ("msxml2.xmlhttp.6.0"),} catch (e) {} try {return new ActiveXObject ("M SXML2. xmlhttp.3.0 ");}        catch (e) {} try {return new ActiveXObject ("Msxml2.xmlhttp");} catch (e) {} return false;    } return false; } return new XMLHttpRequest ();}    function getnewcontent () {var request = Gethttpobject ();        if (request) {Request.open ("GET", "Example.txt", true);   Request.onreadystatechange = function () {if (request.readystate = = 4) {             var para = document.createelement ("P");                var txt = document.createtextnode (request.responsetext);                Para.appendchild (TXT);            document.getElementById ("new"). AppendChild (para);        }        };     Request.send (NULL); }}

Four: Perfect picture library

Dynamically create a picture and title related tag--showpicture.js for displaying the default picture and the specified link:

/** * Attach onclick even on a link tag. */function Preparegallery () {if (!document.getelementbyid) {return false}if (!document.getelementsbytagname) {return F Alse}var Imagegallerynode = document.getElementById (' imagegallery '), if (!imagegallerynode) {return False}var links = Imagegallerynode.getelementsbytagname ("a"), if (Links.length > 0) {for (var i = links.length-1; I >= 0; i--) {links [I].onclick = function () {/*if Show picture work then stop a link active.a link won't work if return false. */return SH Owpicture (this)? False:true;}; links[i].onkeypress = Links[i].onclick;}}} /** * Insert After the specified node */function insertafter (NewNode, targetelement) {var parentnode = Targetelement.pare Ntnode;if (Parentnode.lastchild = = targetelement) {parentnode.appendchild (newNode);} else {Parentnode.insertbefore ( NewNode, targetelement.nextsibling);}} /** * Construct placeholder element */function Prepareplaceholder () {if (!document.createelement) {return false;} if (!documeNt.createtextnode) {return false;} if (!document.getelementbyid) {return false;} if (!document.getelementbyid (' imagegallery ')) {return false;} var imgelement = document.createelement ("IMG"); imgelement.src = "... /picture/benchi.jpg "; Imgelement.alt =" My image gallery "; imgelement.id =" placeholder "; var pelement = Document.createelement ("P");p element.id = "description"; var txt = document.createTextNode ("Choose one picture!"); var gallerynode = document.getElementById (' imagegallery '); InsertAfter (ImgElement, Gallerynode); Pelement.appendchild (TXT); InsertAfter (Pelement, imgelement);} /** * Show the clicked picture. * which picture is clicked. * False if something is unexpected. */function showpicture (whichpicture) {var placeholder = document.getElementById (' placeholder '); if (!placeholder) { Return False}if (Placeholder.nodename! = "IMG") {return False}var Source = Whichpicture.getattribute (' href '); Placeholder.setattribute (' src ', source); var description = document.getElementById (' description ')if (description) {var text = Whichpicture.getattribute (' title ')? Whichpicture.getattribute (' title '): ""; var Firstchildnode = description.firstchild;if (Firstchildnode.nodetype = = 3) {firstchildnode.nodevalue = text;}} return true;} /** * Multiple Execute window.onload; */function Addevent {var oldfunction = window.onload;if (!oldfunction) {window.onload = fun;} else {window.onload = Fu Nction () {oldfunction (); Fun ();}}} Addevent (Preparegallery); addevent (Prepareplaceholder);

JavaScript dynamically creates tags with Ajax