I was asked by a visitor how he could programmatically insert a DIV block into his web page using JavaScript. This article shows one way in which this can be done. The method given can also be used for other HTML elements.
I will assume here that you know some JavaScript and HTML. You do not have to be an expert or anything like that, but some knowledge is needed, otherwise even the question dealt with here will be meaningless to you.
If you do not have a website, and have arrived here thinking that this article will give you an idea of what web development is like, please read How to Create a Website or my articles on domain names instead, since they will be more relevant.
The following code demonstrates one way to insert a DIV block with JavaScript.
Let's say that the relevant part of the web page has the following HTML.
When the code is executed, that part of the page effectively becomes as follows.
Let's work through the code, line by line.
This line creates the DIV element and assigns it to the block_to_insert variable. As you may have already
guessed, although we used createElement() to make a DIV, you can also use it to make other HTML elements.
The above line sets the content of the DIV block so that it has the words "This demo DIV block was inserted into the page using JavaScript." It is equivalent to writing the following HTML code.
Since we will be adding the DIV using a method called appendChild() later
(notice the "child" portion of the name), it stands to reason that we need a parent block into which
it can be inserted.
In our example, we will insert it into another block with the id 'democontainer'.
As such, this line assigns the 'democontainer' DIV element to the variable container_block.
All that remains is to insert our new block into its container, which is done here. The appendChild() method
places block_to_insert as the last child of container_block. (That is,
our new DIV will be placed after all other HTML elements, if any, in container_block.)
The above is the bare minimum that you will typically need to do to inject a DIV block into a web page. You will probably need to add additional code, such as to assign your DIV an id and/or class so that you can customize its appearance using CSS, for example, as follows:
You can see a demo of the code in action by clicking the button below. The same code given above is used here. The outline around the DIV block was added using CSS.
The above code should work in all modern browsers.
Copyright © 2017-2024 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Insert a DIV Block and Other HTML Elements into a Web Page Using JavaScript
