JavaScript adds node operations to HTML

Source: Internet
Author: User
Tags tag name tagname


The content of the HTML page is generally written beforehand, and when the page is opened with a browser, it is loaded directly onto the page. JavaScript comes in handy if you want to have interactive operations on a page. If you want to dynamically add paragraph content or modify paragraph content on a well-presented HTML page, the appendchild method of the Paragraph object will be useful.



As shown in the code, it is

What if you want to add something to the page via the Add some text to page button?

Bind an action to the Click event of the Add some text to page button, and let this action go to add content to the page.


Add appendchild after node


Get what you want to add


Where do you add the content? Let's just add the contents of the input box above the button.

var inText =document.getelementbyid ("Contentarea"). Value;

The getElementById method obtains the object that the ID points to, which is the text input field above the page Contentarea.


put content in a text node


What do you do when you get the value? You need to create a text node to receive the content.

var newtext =document.createtextnode (inText);

After you get the text node, you cannot display it on the page.


Place text nodes in a paragraph


It also needs to be added as paragraph content on the node of the page. Paragraph content, then create a paragraph first.

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

This line of code creates an empty paragraph line with no content.


In a paragraph object, there is a method, called appendchild, that binds the text node information above the paragraph.

Newgraf.appendchild (newtext);


Attach a paragraph to a page attachment point


OK, the content is bound to the paragraph above, but the paragraph still seems to have not found the attachment point ah.

Let's just hang the paragraph behind the form form. If the form form has an ID attribute (assuming its ID is Form1), we can

var docform = document.getElementById ("Form1"); To get to the form, but the form does not have an id attribute, and if the form has a name attribute, we can also get the form array with the same name by Getelementsbyname, and then get to the form we need, unfortunately, the Name property does not.


At this point, where is the breakthrough?

There are three common ways to get objects in document, one of which is obtained through tagname. TagName gets an object with neither the id attribute nor the name attribute, but the object is obtained directly from the tag name.

Here we get the form object through the form tag name.

document.getElementsByTagName ("form") is this OK? Oh, forget, the result set obtained by TagName is a collection, which is the collection of the tag name object, what is the form we want to get?

The first one, the No. 0 in the collection, is document.getElementsByTagName ("form") [0].

OK, so our code is var docform = document.getelementsbytagname ("form") [0];


Once you get the attachment point to mount the paragraph, you need to attach the paragraph to the attachment point.

At this point, you need to use the AppendChild method again, namely Docform.appendchild (Newgraf).


The complete code after finishing is:



Add insertbefore before node


Continue with the above code, if you want to add content to the form before the form?

The change is relatively small, will Docform.appendchild (NEWGRAF);

Change to Document.body.insertBefore (Newgraf, docform); You can do it.

Document.body refers to the body sub-object of the Document object, which is the Body label field above the HTML page.


The InsertBefore method differs from the AppendChild method: TheAppendChild method passes a parameter, which is called by the attachment point, passing the paragraph to be mounted; insertbefore The method is called by Document.body, passing two parameters, the paragraph content to be hung in and the name of the attached attachment, the first parameter is the paragraph containing the content to be added, the second argument is the attachment point, and the paragraph of the first argument is inserted before the second parameter object.


Summarize the steps to add node content information to an HTML page:

1 getting the content to add

2 placing content in a text node

3 Placing a text node in a paragraph

4 Hang the paragraph on the attachment point of the page


JavaScript adds node operations to HTML

Related Article

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.