1.javaScript (JS) appendchild and removechild of common functions

Source: Internet
Author: User

<span style= "font-family:arial, Helvetica, Sans-serif; Background-color:rgb (255, 255, 255); " >1, append and delete HTML elements </span>

Creating HTML Elements

var newele =document.createelement ("P");

The created element is appended to another element:

A. AppendChild (b): If B is a new element, add element B at the end of all child elements of the A element.

If an element already exists in the B page, the effect of this statement is to move the B element into the child element of a.

AppendChild () This function and innerhtml the effect of this property is similar, the difference between: 1 innerHTML the effect will be slower than appendchild (perhaps the reason to parse) 2 innerHTML ratio AppendChild to be more convenient, like writing strings.


There are also two additional elements:

append () and appendto () are functions of jquery. usage modes are:

Append () is preceded by the object to be selected, followed by the element content to be inserted within the object.
AppendTo () is preceded by the content of the element to be inserted and is a jquery object, followed by the object to be selected.

Instance:
$ (' #a '). Append (' content ');
$ (' content '). AppendTo ($ (' #a '));

Note: Append,appendto must be a jquery object in front.

I wrote an example:

<pre name= "Code" class= "JavaScript" ><script type= "Text/javascript" >$ (document). Ready (function () {var t= document.getElementById ("mydiv"); var s=document.createelement ("P"); s.innerhtml= "Woemnsss"; $ (s). AppendTo (t); This sentence can be replaced by two other methods//<span style= "Font-family:arial, Helvetica, Sans-serif;" >t.appendchild (s); </span><pre name= "Code" class= "JavaScript" style= "FONT-SIZE:24PX;" > <span style= "font-family:arial, Helvetica, Sans-serif;" >           //  $ (t). Append (s);</span>
});</script>



$ (s). AppendTo (t) available   <span style= "font-family:arial, Helvetica, Sans-serif;" >t.appendchild (s); and </span><span style= "font-family:arial, Helvetica, Sans-serif;" >$ (t). append (s); Replace, produce the same effect. </span>
<span style= "font-family:arial, Helvetica, Sans-serif;" > In addition: </span><span style= "font-family:arial, Helvetica, Sans-serif;" >$ (s). AppendTo (t) </span><span style= "font-family:arial, Helvetica, Sans-serif;" ></span><pre name= "Code" class= "JavaScript" style= "FONT-SIZE:24PX;" ><pre name= "Code" class= "JavaScript" style= "FONT-SIZE:24PX;" ><span style= "font-family:arial, Helvetica, Sans-serif;" >         $ (t). append (s); it can be written in the following ways:</span>
<span style= "font-family:arial, Helvetica, Sans-serif;" >        $ (t). Append ($ (s)); <span style= "White-space:pre" ></span>$ (s). AppendTo ($ (t));</span>
<span style= "font-family:arial, Helvetica, Sans-serif;" ></span>
2removeChild()

This function is to get the parent element of the element to be deleted. The grammatical form is: parent.removechild (child);

Sometimes we want to delete without involving the parent element. But Dom is the mechanism, and it must be clear that elements and parent elements can be deleted. When we go to the element to be deleted, we can also delete, using its ParentNode property to find the parent element:

var Child=document.getelementbyid ("P1"); Child.parentNode.removeChild (child);

Note: jquery also has functions that correspond to RemoveChild: Remove () and empty ()

Remove (): Refers to the deletion of both itself and child elements

Empty (): Yes Delete child element


1.javaScript (JS) appendchild and removechild of common functions

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.