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