Whenever I create the code using javascript, padding seems to always show up

I have a basic stacked row layout that displays an upper box and lower box without any padding.

<span id="route" class="small">
<div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    </div>
</div>

<div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
        <p>LowerBox</p>
        <p>LowerBox</p>
        <p>LowerBox</p>
    </div>
</div>
</span>

But when I dynamically insert the same source code using JavaScript,

Padding appears between the two vertical boxes.

Do you know what could be causing this issue?

div.push(`
  <div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    </div>
  </div>
`);

div.push(`
  <div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
        <p>LowerBox</p>
        <p>LowerBox</p>
        <p>LowerBox</p>
    </div>
  </div>
`);

$('#route').html(div.join());
javascriptcsstwitter-bootstrap

Answer №1

To change the join delimiter from the default comma to blank, use .join('') like this:

$('#route').html(div.join(''));  


let div = [];

div.push(`<div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    <p>UpperBox</p>
    </div>
</div>`);

div.push(`<div class="row" style="border-style:solid;">
    <div class="col-md-12 col-12">
        <p>LowereBox</p>
        <p>LowereBox</p>
        <p>LowereBox</p>
    </div>
</div>`);

$('#route').html(div.join(''));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="route" class="small"></span>

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

Issue with displaying current date and time dynamically (JavaScript/JQuery)

In order to create a real-time chat using websockets, I want to show the time of a message posted in this format: "% sec/min/hour/day now". After conducting some research, I came across two functions that I have modified : // Get the TimeStamp va ...

javascriptphpjquerywebsocket

Unable to utilize the three.js texture loader within a JavaScript worker environment

I'm currently experimenting with three.js to load textures. Here is the snippet from my main.js file: const worker = new Worker('../workers/worker.js', { type: 'module' }); And this is a simplified version of worker.js that ...

javascriptthree.jsweb-worker

I am looking to configure a specific MUI dropdown to appear below a particular field

In my scenario, when I click on the select dropdown and a popup appears above the field, I would like it to open below that specific area. The desired behavior can be observed in the code sandbox link provided. I need to configure it to start from below th ...

javascriptreactjsmaterial-ui

"Trouble displaying specific events based on their IDs retrieved from the MySQL database

Each button in my list is associated with a specific person. Upon clicking a button, it directs to calendar.php?id=5 (where 5 is the personal id). I want the calendar to display the vacations scheduled for that particular id from the MySQL database. even ...

javascriptphpjquerymysqlfullcalendar

Images flicker as they transition

Within my HTML body, I have the following: <a id="Hal9000"> In addition, there is a function included: function Hal(MSG){ document.getElementById("Hal9000").innerHTML = "<img src=\"+preloadImage("HAL9000.php?Text="+MSG)+"\"\>" ...

javascriptphpajax

Top button disappears in Chromium browser after fade-in effect

I've encountered a very peculiar issue. Whenever I use the page down or fragmented identifier to jump to a specific div, my "go to top" image disappears. Here is the code snippet: HTML: <a title="Go to top" href="#" class="back-to-top"></ ...

javascriptjqueryhtmlcss

Is there an optimal method for transforming HTML to PostScript in Java?

Is there an optimal method in Java to convert HTML with CSS2 support into a PostScript file? ...

javahtmlcsspostscript

How do I pass input values when calling an AJAX function to submit a form in HTML?

Utilizing a modal to submit new data via AJAX API consumption. Although sending the data through the API is not an issue, my lack of HTML skills makes it confusing on how to pass form data values. This scenario involves displaying a modal for users to in ...

javascriptjqueryajaxlaravel

Unable to log out when the button is clicked

I am having trouble figuring out why I can't log out when clicking the button. I have a logout button in my header (navigation). My experience with React is limited. Within my project folder, I have a Store directory which contains an Auth-context f ...

javascriptreactjsnpmcomponents

WooCommerce Checkout and My Account Edit Address now feature dynamic selectable fields for improved customization options

After finding a solution on Stack Overflow to show sub Areas dropdown based on the selected city in WooCommerce checkout, I customized the code for my specific requirements: function cities_areas_settings() { $text_domain = 'woocommerce'; ...

javascriptphpjquerywordpresswoocommerce

Avoid having the java applet destroyed when the container is hidden

I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it se ...

javajavascripthtmlcssapplet

What could be the reason for scrapy not returning any URLs?

Recently, I attempted to develop a tool to simplify my apartment search and access relevant information quickly (the website is not very user-friendly). However, I have encountered an issue and I may be overlooking something obvious...or perhaps I'm j ...

pythonhtmlcssscrapyweb-crawler

A simple guide on accessing a local PDF file and returning it as the response for an ExpressJS application

In my ExpressJS application, I have a method for generating a PDF file and sending it to the client. However, there are cases where I need to retrieve an existing local PDF file and return it as the response. I'm unsure how to handle this scenario. ...

javascriptexpresspdf

Error message: "Uncaught TypeError: Cannot read property 'module' of undefined when using AngularJS in conjunction with RequireJS."

Embarking on my journey of app development with angularJS was a thrilling experience. However, after investing weeks into the project, I had an epiphany - why didn't I start using require JS from the get-go to load my modules? A rookie mistake, yes, b ...

javascriptangularjsrequirejsangular-routing

"Exploring the World of Mobile Development and Screen Size

Currently, I am in the process of creating a basic mobile website that can be accessed through a QR code leading to the page linked below. However, I have encountered an issue where viewing it on my Android or Apple phone results in excess width. Any advic ...

htmlcssmobilecross-browser

Utilizing AngularJS: Executing directives manually

As a newcomer to AngularJS, I am facing a challenge that requires creating a 3-step workflow: The initial step involves calling a web service that provides a list of strings like ["apple", "banana", "orange"]. Upon receiving this response, I must encap ...

javascriptangularjs

Tips for aligning input vertically across rows with bootstrap 5

I'm currently working on a form layout where each row contains a different number of columns, with labels and inputs in each column. However, I'm facing an issue where the start of the input is not aligned vertically for each row. I tried using ...

htmlcssbootstrap-5

Using AJAX to update content based on selected value in a dropdown menu

My challenge lies in ensuring that a select box retains the selected value from a database entry and triggers an onchange event during form editing or updating. While I have successfully populated the data in the select box based on other selections, I a ...

javascripthtmlajaxonchange

When you click on the Admin Panel Side menu, the page refreshes instead of expanding the menu item

I have encountered a strange problem with the AdminLTE admin panel template that I am using in my Angular 11 application. Everything is loading fine with the menu items, but when I click on an item, instead of expanding the group, the page refreshes. Here ...

javascriptbootstrap-4adminlte

Tips for saving a JavaScript function in JSON format

Looking to store a JS object in Local Storage for future reference, but struggling to convert it to a string. Here’s the code: JSON.stringify({ x: 10, y: function (input) { return input; } }) As a result, I get: "{"x":10}" Any su ...

javascriptjson