What is the best way to add two child div elements side by side within a parent div?

Here are the div elements:

<div id="10" class="latestblock">
    <img>
    <span>Abc</span>
</div>

<div id="11" class="latestblock">
    <img>
    <span>pqr</span>
</div>

function AppendDiv(10,11)
{
var eFrom = $('#' + 10);
var toDiv = $('#' + 11);
var htmldiv = eFrom.toString() + toDiv.toString();
  <!--$("#large").html
                (
                    htmldiv
                ).center().fadeIn("slow");--> Not working
}

Now I would like to combine these div elements and append them to another div shown below:

<div id="large"></div>   

The desired layout should look like this:

https://i.sstatic.net/Ien71.png

The final generated HTML output should be as follows:

<div id="large">
    <div id="10" class="latestblock">
        <img>
        <span>Abc</span>
    </div>

    <div id="11" class="latestblock">
        <img>
        <span>pqr</span>
    </div>
</div>

How can I achieve this?

Answer №1

10 and 11 are not suitable as argument names (Argument names cannot be numerical values but must be variables that do not begin with numbers). Utilize outerHTML to extract the Markup of the selected elements. Transform the elements from being hidden .hide() to fading in fadeIn()

function AddElements(first, second) {
  var elementOne = $('#' + first);
  var targetElement = $('#' + second);
  var combinedHTML = elementOne[0].outerHTML + targetElement[0].outerHTML;
  $("#large").html(combinedHTML).hide().fadeIn("slow");
}

AddElements('10', '11');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="10" class="latestblock">
  <img>
  <span>Abc</span>
</div>

<div id="11" class="latestblock">
  <img>
  <span>pqr</span>
</div>
<hr>
<div id="large"></div>

Note: As highlighted by guest271314, having duplicate id elements in the DOM is not advised.

Answer №2

One way to achieve this is by utilizing the .append() method.

$("#large").append(eFrom.fadeOut(0), toDiv.fadeOut(0)).find("div").fadeIn("slow");

Answer №3

To simplify the process, assign the html() content of both divs to variables and then combine them before appending them to the #large div.

var firstDiv = $('#10')[0].outerHTML;
var secondDiv = $('#11')[0].outerHTML;

$('#large').append(firstDiv + secondDiv);

For example, check out: https://jsfiddle.net/86zx3b5m/3/

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

Optimizing Safari for the Best Screen Size Experience

I seem to be encountering issues with optimizing my website. Everything appears to be working correctly in terms of widths, heights, margins, etc., on my laptop. However, when I view the site on an iMac or any other computer with a larger screen size, the ...

What is the best method for dynamically generating a 3-column table (i.e. a tile list)?

Here is a snippet of my JSON-formatted data: {"mydata": [{"phone":"5456868","name":"Dave"},{"phone":"9999875","name":"Susan"}, {"phone":"9994058","name":"Mary"},{"phone":"9995658","name":"Jan"}, {"phone":"3584650","name":"Yanni"},{"phone":"4512523"," ...

Elevate the opacity with a hover effect

I am currently in the process of building my own website using siteorigin page builder on wordpress. One issue I have encountered is that they do not offer a hover option, so I had to create a custom CSS to add a hover effect on the background color. When ...

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

Check out the code snippet below. I'm attempting to adjust the button hover color to transparent. The div class is "button_container" while the button class is "btn". I made changes to the color initially, but it doesn't seem to be working. Any a ...

Attempting to modify the state within a nested object located in an array by using json data

My objective is to retrieve data from the Google Books API, which returns JSON data in a similar format to what my state displays. I aim to update the title with the title string provided by the JSON data. Currently, I am encountering a "failed to compile" ...

Inter-component communication within nested structures in Angular 2

Working on an Angular2 project that involves multiple nested components, I have successfully sent data from a child component to its immediate parent. However, when dealing with three levels of nesting, the question arises: How can I send or modify data ac ...

What is the best way to cut an array using a unique pattern?

I have a unique array that I need to transform: let arr = [1,2,3,4,5,"a","b","c",9,10]; My goal is to slice this array into the following sequence: let arr = [[1,2,3],[2,3,4],[3,4,5],[4,5,"a"],[5,"a","b"],["a","b","c"],["b","c",9],["c",9,10]]; Despite ...

Step-by-step guide on aligning an image to the left of text in a Material UI table column

After experimenting with inline styling, I attempted to move the images next to the text in a specific column. However, there are some rows where the images overlap or the text is positioned too far to the right, as shown in this image: https://i.stack.im ...

Enhancing website aesthetics through CSS styling

My goal is to create websites with a fresh, updated design. One example of a site I admire is Manta Media Inc I assume that CSS plays a big role in achieving this look. What keywords should I use when searching on Google to learn how to build a web inte ...

Struggling with implementing map() inside another map() within the render() method in React TypeScript

I am looking to display messages and their corresponding replies in a React application using TypeScript. The messages are stored in one array within the state, while the replies are stored in a separate array. This is my current code which is not renderi ...

Is it possible to include tags in the response using Jquery.form AjaxSubmit?

After using ajaxSubmit on a form, the service sends back a number. Strangely, ajaxSubmit appears to be adding extra tags to the number. form.ajaxSubmit(function(data){ alert(data); }); Upon alerting the data, it displays: "<head></head>< ...

Retrieve a file from a remote server without storing it locally on the server

I need to download a zip file from another server without saving it locally. Currently, I am sending a POST request to the server which responds with the zip file, then I save it on my local server and send it using res.download. What I would like is to di ...

Determine the most recent API response and disregard any outdated responses from previous calls

I am currently working on a search page where the user can input text into a search box. With each character they enter, an ajax call is made to update the UI. However, I am facing an issue in determining the response from the last API call. For example, i ...

What is the best way to maintain a fixed header for a content div?

I recently developed a website using angularjs. <html> <head></head> <body ng-app="app1" ng-controller = "ctrl1"> <header></header> <div ng-view></div> <footer></footer> </body> </ht ...

The styles order definition in the Material-UI production build may vary from that in development

When using material-ui, an issue arises in the production build where the generated styles differ from those in development. The order of the material-ui styles in production does not match the order in development. In DEV, the material-ui styles are defi ...

Is there a way to retrieve data from the host URL within the getStaticPaths function in Next.js?

In my Next.js application, there is a serverless function responsible for fetching data from the host. The host URL is configured in a .env file where it is set to http://localhost:3000/api/data during development and https://productionurl.com/api/data in ...

The loading spinner fails to function when triggered by the ng-click or ng-change events in an AngularJS application

I have implemented a loading spinner to display while the page is loading. App.controller('MailFolderController', ['$scope', '$http',function ($scope, $http){ $scope.loading = true; $scope.allotmentStatus = [ {"value ...

A method for applying the "active" class to the parent element when a child button is clicked, and toggling the "active" class if the button is clicked again

This code is functioning properly with just one small request I have. HTML: <div class="item" ng-repeat="cell in [0,1,2]" data-ng-class="{active:index=='{{$index}}'}"> <button data-ng-click="activate('{{$index}}')">Act ...

Issue with Jquery Slider Showing Empty Slide

Currently addressing issues with the slider on my site, which utilizes SlidesJS at . There seems to be a problem where it shows a blank slide inexplicably. After investigating, I noticed that a list element is being added to the pagination class, but I can ...

Retrieving data from JSON by value compared to arrays

In this scenario, an ajax request fetches a json response that contains a product_id along with other values in each object. I currently have a PHP variable that holds an array of product objects (in a Laravel collection) and I want to avoid querying them ...