How To Create A Container In Dreamweaver

How to Insert a DIV Block and Other HTML Elements into a Web Page Using JavaScript

Adding HTML to a page with JavaScript

How to Insert a DIV Block and Other HTML Elements into a Web Page Using JavaScript

by Christopher Heng, thesitewizard.com

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.

Prerequisites

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.

Adding a DIV Block or Other HTML Elements with JavaScript

The following code demonstrates one way to insert a DIV block with JavaScript.

var block_to_insert ;
var container_block ;

block_to_insert = document.createElement( 'div' );
block_to_insert.innerHTML = 'This demo DIV block was inserted into the page using JavaScript.' ;

container_block = document.getElementById( 'democontainer' );
container_block.appendChild( block_to_insert );

Let's say that the relevant part of the web page has the following HTML.

<div id="democontainer">
<p>
The new block will appear below this paragraph.
</p>
</div>

When the code is executed, that part of the page effectively becomes as follows.

<div id="democontainer">
<p>
The new block will appear below this paragraph.
</p>
<div>
This demo DIV block was inserted into the page using JavaScript.
</div>
</div>

Explanation of the Code

Let's work through the code, line by line.

block_to_insert = document.createElement( 'div' );

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.
block_to_insert.innerHTML = 'This demo DIV block was inserted into the page using JavaScript.' ;

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.

<div>
This demo DIV block was inserted into the page using JavaScript.
</div>
container_block = document.getElementById( 'democontainer' );

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.
container_block.appendChild( block_to_insert );

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:

block_to_insert.id = 'inserted_block_id' ;
block_to_insert.className = 'inserted_block_class' ;

Demo

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.

Compatibility

The above code should work in all modern browsers.

Copyright © 2017 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/.

thesitewizard™ News Feed (RSS Site Feed)

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

How to Centre a DIV Block Using CSS
How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically
How to Use Cookies in JavaScript
How to Create Rounded Corners for Your Box Borders in CSS
How to Register Your Own Domain Name
Can you register a domain name directly with ICANN instead of through a middleman?
How to Redirect from Your Root Domain to the WWW Subdomain and Vice Versa Using mod_rewrite
How to Change the Default Web Page that is Shown When Someone Goes to Your Domain Name

New Articles

How to Give Alternate Rows of a Table a Different Colour (HTML/CSS)
How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
How to Insert Meta Tags into a Web Page with BlueGriffon
How to Play a Song (or Some Other Audio Clip) from a List on a Website
How to Draw a Horizontal Line on a Web Page with Expression Web
How to Create a Website Free of Charge
Why Can't I Make Up Any Domain I Want? Is There a Way to Do Away with a Registrar Altogether?
What's the Difference Between a Domain Name Registrar and a Web Host?
How to Make a Mobile-Friendly Website: Responsive Design in CSS
What's the Difference Between a Content Management System (CMS), a Blog, a Web Editor and an Online Site Builder?

How to Link to This Page

It will appear on your page as:

How to Insert a DIV Block and Other HTML Elements into a Web Page Using JavaScript