The .AppendChild() method does not appear to be working as expected following the completion of

Encountering a peculiar problem here. The scripts run smoothly, but the content doesn't display on screen until I "inspect element" and then close the inspector window or zoom in/out. It's not an issue with the "display" CSS property because even after zooming in/out, it remains hidden...

I'm really puzzled as to why this is happening :/

Script:

function css() //create new
{
    var qntinputs = document.getElementsByTagName('input');
var j = qntinputs.length + 9;
var i = qntinputs.length;


for (i; i<j;i++)
{ 
    table = document.getElementById("table");
      var element = document.createElement('div');
      var input = document.createElement("input");
      element.className = "cell";
      element.style.paddingTop = "0px";
      element.style.height = "50px";
      input.className = "insert" + i;
      if (i == j-1 || i == j-2)
      {
          if (i==j-1) 
          {
               element.style.width ="100px";
               input.style.width ="90px";
               input.style.paddingLeft = "5px";
          }
          else 
          {
              element.style.width ="90px";
              input.style.width ="90px";
          }
        input.type = "checkbox";
      }
      else
      {
          if (i == j-4 || i == j-3)
          {
              input.type = "time";
          }
          else
          {

              if (i== j-5)
              {
                input.type = "date";
              }
                  else
                  {
                      if (i== j-6)
                      {
                        element.style.width = "90px";
                        input.style.width = "80px";
                      }
              }
           }
      } 
      document.getElementById("table").appendChild(element);
     table.appendChild(element);
     element.appendChild(input);
}
i = qntinputs.length;
}

Any suggestions on how to force a "refresh" or zoom in and out again to make it appear?

Answer №1

In order to properly structure your HTML, remember that a div cannot be a direct child of a table. It should be contained within a td element instead. You can achieve this by first appending a tr to the table, followed by a td, and then the div itself. Alternatively, you can directly insert the content on the td without using a 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

Align the CSS dropdown content to the right rather than the left for a cleaner layout

The information in this dropdown menu is currently aligned to the left of the icon. I would like it to be aligned to the right. Thank you! <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releas ...

Tips for validating Enum Strings using the newest version of Joi?

Is there a way to validate Enum String? In the past, I followed this advice from: https://github.com/hapijs/joi/issues/1449 enum UserRole { Admin = 'admin', Staff = 'staff' } const validator = { create: Joi.object().keys({ ...

I am seeking assistance with generating a printed list from the database

Struggling for two full days to successfully print a simple list from the database. Take a look at the current state of the code: function CategoriesTable() { const [isLoading, setLoading] = useState(true); let item_list = []; let print_list; useEffect(( ...

What is the best way to seamlessly replicate a small background image across a webpage?

Currently, I'm trying to set a page background image using the following CSS code: background:url(images/body_bg.jpg) repeat-x top; The issue is that the image size is not large enough to cover the entire webpage - it only appears as a thin strip. A ...

Trouble arising from PHP's encoded array

I am encountering an issue with retrieving a value from PHP and passing it to Javascript. The PHP array is encoded like this : echo json_encode($myArray); On the Javascript side, I use the following code within the $.ajax method: success:function (data) ...

Displaying a banner at the bottom of a React page

I need to display a banner with the text "All items..." on every page. Currently, I have set the position attribute to fixed, but the banner is aligned to the left and I want it to be centered horizontally instead. Below is my code snippet: export const Ba ...

The NextJS API is now pointing to the index.js file rather than the [id].js file

I am currently setting up an API in NextJS. In my /classes folder, I have index.js and [id].js files. The purpose of /classes/ is to retrieve all classes from the database or add a new class. The purpose of /classes/[id] is to fetch a specific class, upda ...

Detect and switch the value of a CSS selector using Javascript

Incorporating the subsequent jQuery code to insert CSS styles into a <style id="customizer-preview"> tag within the <head>: wp.customize( 'site_title_color', function( value ) { value.bind( function( newval ) { if ( $( &a ...

Ways to specify the default value for a component

A sample of my custom component code (Amount.tsx) is shown below: const Price = ({ price, prevPrice }) => { return ( <div className="product-amount"> <div className="price"> {prevPrice ? (<del class ...

Can the Angular.js scope be maintained while also making changes to the template?

I am currently facing a challenge with my directive. In the snippet below, I am attempting to extract content from a template, append it to the layout, and then compile it: var $template = angular.element("<div></div>"); $template.append($co ...

Unable to retrieve the value of a particular index within an array containing JSON data

Code to add items to an array: var allItems = []; $.getJSON(url, function(data) { $.each(data, function(i) { allItems.push({ theTeam: data[i]["TeamName"], thePlayer: data[i]["TeamPlayer"], }); }); }) When u ...

Controller receiving null arrays from Ajax post

Every time I send null arrays through AJAX to a controller, even though the controller code looks like this: [HttpPost] public decimal CalculatePrice(PaintballItemQuantity[] piq_tab, EventOtherOption[] eoo_tab, int VAT = 8) { ... } Here's t ...

Issue with $watch function causing $scope variable to remain undefined, even though it is being explicitly

I've been encountering an issue while trying to insert data into my Firebase database using a user's uid. It seems to be coming out as undefined for some reason. Here's a closer look at the code snippet causing the problem: The primary cont ...

Troubleshooting JSON parsing issues in PHP

In reference to the discussion at: , where suggestions mainly revolved around JavaScript. Is there a specific function in PHP that can be utilized to address the issue described below and ensure that the output is valid JSON? Please note that using front ...

What is the best way to position three SVG files in the center of a webpage?

I want to combine three separate SVG files to create one single graphic. The first SVG file is a red triangle, the second is a blue circle inside the triangle, and the third is a purple rectangle beneath the triangle with a little space in between. My obje ...

Is it possible to retrieve data from a promise using the `use` hook within a context?

Scenario In my application, I have a component called UserContext which handles the authentication process. This is how the code for UserProvider looks: const UserProvider = ({ children }: { children: React.ReactNode }) => { const [user, setUser] = ...

Creating a Typescript interface for a anonymous function being passed into a React component

I have been exploring the use of Typescript in conjunction with React functional components, particularly when utilizing a Bootstrap modal component. I encountered some confusion regarding how to properly define the Typescript interface for the component w ...

Ensure portrait orientation images have a restricted width to maintain their aspect ratio

On a responsive site, I have set up flexslider to showcase both landscape and portrait orientation images. The smoothHeight: true option is enabled to adjust the height according to the images. However, at the largest media query where the flexslider cont ...

Create a soft focus on the background sans any filters

I am in the process of developing a website and have implemented code to blur out the background: CSS #background{ background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o ...

Tips for dynamically loading images in React with a Collage component

It appears that all the examples I've come across are static in terms of loading images. While the code works, it does not display the divider <div> tag as expected. Instead, the results (images) are shown stacked in the first item of the Collag ...