Ways to insert a div element into the HTML display utilizing JavaScript

There's a method I'd like to use to dynamically add a div to the view using JavaScript.

I attempted hiding the div on page load and then showing it through JavaScript.

However, what ends up happening is that the div content appears briefly on load before being hidden by the JavaScript.

So, I've come up with a solution where I create a main div in the view like this:

<div id = "ManagerSection">

</div>

and insert my code into the div from JavaScript.

Here's the approach I tried:

function myfunction() {

  document.getElementById("ManagerSection").innerHTML +=
  "<h3>This text has been inserted by JS</h3>";

}

This successfully adds the text, but in my case, I need to add a more complex structure like this:

[complex HTML structure provided in example]

When I try to copy this into JavaScript within the double quotes, it gets interpreted as C# code within the JavaScript.

Is there a way to achieve this? Any suggestions?

Answer №1

Give this method a try and see if it works for you.

document.getElementById("ManagerSection").insertAdjacentHTML("afterend",`<div class="col-lg-4 col-md-4 order-1">
   <div class="row">
     <div class="col-lg-6 col-md-12 col-6 mb-4">
       <div class="card">
         <div class="card-body">
           <div class="card-title d-flex align-items-start justify-content-between">
             <div class="avatar flex-shrink-0">
               <img src="~/Theme/assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
             </div>
             <div class="dropdown">
               <button class="btn p-0" type="button" id="cardOpt3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="bx bx-dots-vertical-rounded"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
                 <a class="dropdown-item" href="javascript:void(0);">View More</a>
                 <a class="dropdown-item" href="javascript:void(0);">Delete</a>
               </div>
             </div>
           </div>
           <span class="fw-semibold d-block mb-1">Pending Approvals</span>
           <h3 class="card-title mb-2">0</h3>
         </div>
       </div>
     </div>
     <div class="col-lg-6 col-md-12 col-6 mb-4">
       <div class="card">
         <div class="card-body">
           <div class="card-title d-flex align-items-start justify-content-between">
             <div class="avatar flex-shrink-0">
               <img src="~/Theme/assets/img/icons/unicons/chart-success.png" alt="chart success" class="rounded" />
             </div>
             <div class="dropdown">
               <button class="btn p-0" type="button" id="cardOpt3" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="bx bx-dots-vertical-rounded"></i>
               </button>
               <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt3">
                 <a class="dropdown-item" href="javascript:void(0);">View More</a>
                 <a class="dropdown-item" href="javascript:void(0);">Delete</a>
               </div>
             </div>
           </div>
           <span class="fw-semibold d-block mb-1">Pending Approvals</span>
           <h3 class="card-title mb-2">0</h3>
         </div>
       </div>
     </div>
   </div>
 </div>
 <div class="col-12 col-md-8 col-lg-4 order-3 order-md-2">
   <div class="row">
     <div class="col-6 mb-4">
       <div class="card">
         <div class="card-body">
           <div class="card-title d-flex align-items-start justify-content-between">
             <div class="avatar flex-shrink-0">
               <img src="~/Theme/assets/img/icons/unicons/cc-primary.png" alt="Credit Card" class="rounded" />
             </div>
             <div class="dropdown">
               <button class="btn p-0" type="button" id="cardOpt1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="bx bx-dots-vertical-rounded"></i>
               </button>
               <div class="dropdown-menu" aria-labelledby="cardOpt1">
                 <a class="dropdown-item" href="javascript:void(0);">View More</a>
                 <a class="dropdown-item" href="javascript:void(0);">Delete</a>
               </div>
             </div>
           </div>
           <span class="fw-semibold d-block mb-1">Outlets</span>
           <h3 class="card-title mb-2">0</h3>
         </div>
       </div>
     </div>
     <div class="col-6 mb-4">
       <div class="card">
         <div class="card-body">
           <div class="card-title d-flex align-items-start justify-content-between">
             <div class="avatar flex-shrink-0">
               <img src="~/Theme/assets/img/icons/unicons/cc-primary.png" alt="Credit Card" class="rounded" />
             </div>
             <div class="dropdown">
               <button class="btn p-0" type="button" id="cardOpt1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 <i class="bx bx-dots-vertical-rounded"></i>
               </button>
               <div class="dropdown-menu" aria-labelledby="cardOpt1">
                 <a class="dropdown-item" href="javascript:void(0);">View More</a>
                 <a class="dropdown-item" href="javascript:void(0);">Delete</a>
               </div>
             </div>
           </div>
           <span class="fw-semibold d-block mb-1">Outlets</span>
           <h3 class="card-title mb-2">0</h3>
         </div>
       </div>
     </div>
   </div>
 </div>`)
<div id="ManagerSection"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Applying VueJS filters to refine object values

Is there a way to verify if the value of "startAt" is present in an object and return its corresponding ID? Here is the object in question: [{ "id": "1234567", "createTimestamp": "2020", "name": { "action": "", "allDay": false, "categor ...

Generate a fresh line within the source code

Currently, I am facing a challenge with dynamically loading CSS, JS, and other components as it appears messy when viewed from the source. Although this issue does not impact functionality, I am not satisfied with how it looks in the source code. When exam ...

Display loading icon in AngularJS during template retrieval

Imagine I have this specific directive: angular .module('app.widgets') .directive('myCalendarRange', myCalendarRange); function myCalendarRange () { var directive = { link: link, templateUrl: '/template/is/located ...

Transform a loaded image into canvas

I have encountered a challenge while working on a plugin where I need to convert an Image into Canvas and store it as data URL. The function currently triggers on the 'load' event, but how can I achieve this conversion for an image that is alread ...

Error message: The function .datepicker('getDate') caused an Uncaught TypeError: Data[option] error

Encountering an issue with the code data[option] is not a function when attempting to utilize .datepicker('getDate'). The datepicker was initialized using this code: <h4>Transaction Date:</h4> From: <input id="sta ...

Columns with adjustable widths

I am looking to create a layout with 3 columns (which may change, could be up to 4) that are all flexible width and fill the screen. Does anyone know if this is possible using CSS? Basically, I want three blocks lined up horizontally that take up the enti ...

CSS First Element

"When an element with a specific id has a first-child descendant that is any of the heading tags (h1, h2, h3, h4, h5, or h6), apply the following CSS styles:" I have come up with the following selector: #content:first-child h1, #content:first-child h2, ...

Creating unit tests without relying on a testing framework: A guide

My goal is to unit test a simple function using pure JavaScript: NS.isType = function (type, obj) { if (obj.constructor && obj.constructor.name) { return obj.constructor.name === type; } return toString.call(obj) === '[obj ...

Aligning container - property: inline-block;

Having trouble centering two divs that are set to "display: inline-block;" in your code? Removing the inline-block class centers them, but they end up stacking vertically instead of horizontally. See below for an example: #news { background-image: url ...

Obtain JSON data instead of XML data from a web service through Ajax with the option 'contentType' set to 'false'

Upon making an AJAX call to send an image file to one of my web service (.asmx) methods, I encountered a problem where the web service returns XML instead of JSON. This issue arose because I needed to set the contentType to false, in order to successfully ...

Using PHP along with JQuery and AJAX to update the database when a Div element is hidden

My website has a complex setup, so I will simplify it with an example. Current Configuration I currently have two buttons. <a id="one" href="#">Link 1</a> <a id="two" href="#">Link 2</a> Additionally, I have two divs. <div i ...

toggle between utilizing the page object API and the primary Nightwatch API

Currently, I am incorporating the page object model alongside nightwatch for my testing procedures. Encountering challenges while trying to interact with an element led me to execute some jquery. However, the 'execute' command is not featured in ...

There is an error in ReactJS: TypeError - _this.props.match is not defined

I am experiencing a TypeError in my console tab and I can't seem to figure out where the error is occurring in my source code. I am relatively new to ReactJS so any help in identifying what I'm doing wrong would be greatly appreciated. Thank you ...

Pushing items to an array is causing the loss of previously added data

Currently, I am working on developing a prototype of a Restaurants application using Angular 8. In this project, I have implemented @Input() to transfer individual restaurant data as an object from the parent component to the RestaurantCardComponent for pr ...

Utilizing Parent Method in VueJS Component: A Step-by-Step Guide

I need to access methods of the parent component from within the current one, without using props. Below is the structure in HTML: <div id="el"> <user v-for="user in users" :item="user"></user> </div> And here is the Vue code ...

I am looking for JavaScript or jQuery code that allows me to incorporate a "Save This Page As" button

Is there a way to enhance the saving process for users visiting an HTML page, rather than requiring them to go through File > Save As? I am interested in implementing a "Save Page As" button on the page that would trigger the save as dialog when clicke ...

Can you explain the variances between the index.html and index-async.html files within the AngularJS seed project?

Within the angularjs seed project, there are two files that appear to produce identical results: index.html and index-async.html. If you want to view the code for index-async.html, you can visit this link. Similarly, if you're interested in the code ...

CSS 3 - Apply transition to the 'display' property

I have a question about using the transition effect in conjunction with the display property: Currently, I am testing on Safari. input.input_field { display:none; transition-property: display; transition-duration: 2s; -webkit-transition-p ...

Preserving CSS styling while loading an HTML page with InnerHTML

By using the following code snippet, I have successfully implemented a feature on my website that allows me to load an HTML page into a specific div container when clicking a link in the menu. However, I encountered an issue where the background color of ...

Struggling to get getInitialProps working in dynamic routes with Next.js?

I am encountering an issue. The return value from the getInitialProps function is not being passed to the parent component. However, when I console.log the values inside the getInitialProps function, they appear to be correct. Here is the code snippet: i ...