How To Insert A DIV Block And Other HTML Elements Into A Web ...

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.

1. 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.

2. 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>
3. 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.

4. 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-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/.

You are here: Top > JavaScript > How to Insert a DIV Block and Other HTML Elements into a Web Page Using JavaScript

Other articles on: JavaScript, CSS, HTML

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.

Related Articles

• 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 Convert Your Website from XHTML 1.0 to HTML5 the Quick and Easy Way
• How to Set the Height of a DIV Relative to a Browser Window (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

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/javascripts/insert-div-block-javascript.shtml" target="_top">How to Insert a DIV Block and Other HTML Elements into a Web Page Using JavaScript</a>

It will appear on your page as:

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