Step-by-step guide on duplicating a div a set number of times

I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner).

    <script language="javascript" type='text/javascript'>
    function updateDivs() {
     var repeat_container = document.getElementById("layout");
     var div_element;

    for (var i = 0; i < 4; i++) {
        div_element = document.createElement("div");
        repeat_container.appendChild(div_element);
      }
    }
   </script>


  <div class = "layout">
 <div class="header"><asp:label id="label1" runat="server/></div>
   <div class="chart"><asp:label id="label2" runat="server/></div>
    <div class="legend"><asp:label id="label3" runat="server/></div>
     <div class="info1"><asp:label id="label4" runat="server/></div>
      <div class="info2"><asp:label id="label5" runat="server/></div>
      <div class="info3"><asp:label id="label6" runat="server/></div>............
  </div>

  ![enter image description here][1]
  The screenshot is provided below

Answer №1

Attempting this task with JavaScript is not feasible due to the presence of ASP.NET controls. To tackle this issue, you will need to modify each div by adding runat="server" and adjusting their IDs to Upperleftcorner, Upperrightcornerbottom, bottomleftcorner, bottomrightcorner.

Given Code Snippet:

          List<HtmlGenericControl> alldivs=new List<HtmlGenericControl>(4);
            alldivs.Add(Upperleftcorner);
            alldivs.Add(Upperrightcornerbottom);
            alldivs.Add(bottomleftcorner);
            alldivs.Add(bottomrightcorner); 
            foreach(HtmlGenericControl divparent in alldivs)
            {
            HtmlGenericControl divholder= new HtmlGenericControl("div");
            divholder.Attributes.Add("class", "layout");
            for(int i=1;i<=6;i++)
            {
            HtmlGenericControl div= new HtmlGenericControl("div");
            if(i==1)
            div.Attributes.Add("class", "header");
            if(i==2)
            div.Attributes.Add("class", "chart");
            if(i==3)
            div.Attributes.Add("class", "legend");
            if(i==4)
            div.Attributes.Add("class", "info1");
            if(i==5)
            div.Attributes.Add("class", "info2");
            if(i==6)
            div.Attributes.Add("class", "info3");
            Label l=new Label();
            div.Controls.Add(l);
            divholder.Controls.Add(div);
            }
            divparent.Controls.Add(divholder);
            }

To implement changes using JavaScript, incorporation of <span> tags is necessary.

<script language="javascript" type='text/javascript'>
    function updateDivs() {
     var repeat_container = document.getElementById("layout");
     var div_element='<div class = "layout"><div class="header"><span  class="label1" /></div><div class="chart"><span  class="label2" /></div><div class="legend"><span  class="label3" /></div><div class="info1"><span  class="label4" r/></div><div class="info2"><span  class="label5" /></div><div class="info3"><span class="label6" /></div></div>';

    for (var i = 0; i < 4; i++) {
        div_element = document.createElement("div");
        repeat_container.appendChild(div_element);
      }
    }
   </script>

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

Using conditional rendering to set an icon in a ChipField component in React Admin

One feature in my React Admin App is a Datagrid with a ChipField displaying a text property. I want to enhance this by adding an icon to the ChipField using the icon prop, which should change based on the text value. This is my current approach: expor ...

Discover the method to retrieve every element from a Listbox with the click of a Button and utilizing an ajax call

How can I retrieve all the elements from a Listbox when a Button Click event triggers an ajax call? I have created a function that successfully returns all the elements from the Listbox. However, when I try to bind it with the ajax call, it doesn't w ...

Creating a PDF document using HTML code

I am interested in creating a PDF file from an HTML code that includes the stylesheet rules using PHP. Currently, I am attempting to achieve this with the MPDF library. However, the generated PDF does not resemble the original HTML page. Many elements app ...

Trigger a new tab opening following an ajax response with Javascript

Having trouble opening in a new tab after receiving an ajax response with JavaScript, I attempted using both _newtab and _blank However, neither of them seem to be working. I wonder, Is there a solution available to find the answer? ...

unable to display images from a folder using v-for in Vue.js

Just getting started with Vuejs and I have two pictures stored on my website. The v-for loop is correctly populating the information inside databaseListItem. The path is /opt/lampp/htdocs/products_db/stored_images/cms.png https://i.stack.imgur.com/969U7.p ...

The never-ending loading problem at the bottom of the Firefox screen seems

I am facing an issue while trying to open something in Firefox using window.open(). The loading screen seems to never stop, and I cannot pinpoint the reason behind it. Any advice on how to resolve this would be greatly appreciated. View Screenshot: This ...

Challenges faced when retrieving data from a web API using JavaScript with REACT

Having trouble retrieving data from a Web API in React. The API URL is and I've stored it in a state called pokeData. When I do a console.log(pokeData), everything works fine. Likewise, there are no issues with console.log(pokeData.types). However, ...

Node.js unleashes the power of Ajax

I have seen some people ask this question before, but I am having trouble understanding the responses :/ I am working with node.js and really want to utilize Ajax in my project. Here is a snippet of my code: var $ = require('jquery'); var http ...

What is the best method for inserting dynamic HTML content (DIV) with JavaScript?

Can someone assist me in dynamically adding HTML content when data is returned from the server-side? I am currently using ajax/jQuery to handle server-side processing requirements. The success code section of my ajax function allows me to write HTML elemen ...

Unique and responsive grid styling with CSS

Is it possible to create a responsive grid like the one shown in the image below? I attempted to use absolute positioning for all blocks, but I'm having trouble making it responsive... I should note that the styling will be generated dynamically usi ...

Is there a workaround utilizing calc() and vh specifically for Chrome browsers?

Is it possible to find a CSS-only solution for incorporating vh in calc() functions specifically for Chrome browsers? I am trying to implement calc(100vh - 25px) as the top margin in order to make a 25px bar stick to the bottom of the page, but I am facin ...

Remove an item from a complex JSON structure based on the specified name. The function will then return the

Hey there, I'm just starting out with react native and I have an array of objects. My goal is to remove an inner object from this JSON data. [ { Key: 1, exchnageArr: [ { name: ”FX” }, { name: ”MK” ...

Generating a constantly evolving 3D model and keeping it current within a web browser

My website already has a large user base, and I am looking to create a 3D visual representation of data on one of the pages. This model needs to be easily updatable based on each user's database information (imagine a square board with a ball whose po ...

Encountering a Node V18 Peer Dependency Conflict错

Can someone please help me understand what's causing this error? Every time I try to install a dependency, this keeps popping up. I'm completely lost and unsure of what's happening. npm ERR! 1 more (the root project) npm ERR! peer ...

Exploring jQuery Mobile: Uncovering the Power of clientX, clientY, and taphold Event

In my current project, I am implementing the taphold event and require the coordinates of the tapped point by the user. However, I have encountered an issue where event.clientX and event.clientY are returning as undefined (you can see the example here: her ...

Extract the raw text content from nested elements

Working with highlight.js to include a custom CSS code, however, this library automatically adds span tags around the desired text For example: <pre> <code class="language-css hljs" contenteditable="true" id="css-code&quo ...

Error: Attempting to access a property called 'name' on an undefined variable leads to a TypeError

I am a beginner with MongodB and nodejs. I have successfully implemented the GET method, which returns an empty array. However, when I tried to use POST in Postman for "categories," I encountered this error message: ExpressJS categories route app.js Err ...

bindings and validation of input values in angularjs

In my scenario, I am dealing with a dynamic regExp and unique masks for each input. For instance, the regExp is defined as [0-9]{9,9} and the corresponding mask is XXX-XX-XX-XX. However, when it comes to Angular's pattern validation, this setup is con ...

Preventing access to websites through a web application using JavaScript

I am in the process of creating a web application that enables users to create a list of websites they wish to block, preventing access from their browsers. My goal is to block websites on all browsers, but I have narrowed my focus to Chrome for now. I ha ...

Finding the index of a nested div element with a click event using jQuery

I'm currently working on a click event to retrieve the index of the outermost parent div, but I'm facing some difficulties in getting it to work. Here is a snippet showcasing a list of several divs: <div class="owl-item"> <div class= ...