How to Align Text and Image Inside a JavaScript-Generated Div

I am attempting to use JavaScript to generate a div with an image on the left and text that can dynamically switch on the right side.

What I envision is something like this: [IMAGE] "text"

Currently, my attempt has resulted in the text showing up below the image. Any help would be greatly appreciated.

let img = document.createElement("img");
img.src = "https://via.placeholder.com/50";
img.id = "icon"
img.style.display = "flex";
img.style.alignItems = "center";
img.setAttribute("height", "76.8");
img.setAttribute("width", "76.8");

let textSpan = document.createElement("span")
textSpan.id = "Count"
textSpan.style.padding = "10px"
textSpan.innerHTML = "x0"

let CountDiv = document.createElement('div')
CountDiv.id = "CountDiv"
CountDiv.style.position = 'absolute';
CountDiv.style.top = 400 + 'px';
CountDiv.style.left = 200 + 'px';
CountDiv.style.background = "white"
CountDiv.append(img)
CountDiv.append(textSpan)

document.body.appendChild(CountDiv)
javascripthtmlcss

Answer №1

Finally cracked the code! Turns out, Flex needs to be applied to the container and not the image element.

let img = document.createElement("img");
        img.src="img.png";
        img.id="icon"

        //Remember, apply Flex on div, not Image

        img.setAttribute("height", "76.8");
        img.setAttribute("width", "76.8");

let textSpan=document.createElement("span")
        textSpan.id = "Count"
        textSpan.style.padding="10px"
        textSpan.innerHTML="x0"

let CountDiv = document.createElement('div')
        CountDiv.id= "CountDiv"
        CountDiv.style.position = 'absolute';
        CountDiv.style.top = 400 + 'px';
        CountDiv.style.left = 200+'px';
        CountDiv.style.background="white"
        CountDiv.append(img)
        CountDiv.append(textSpan)

        //Don't forget
        CountDiv.style.display ="flex";
        CountDiv.style.alignItems="center";

 document.body.appendChild(CountDiv)

Answer №2

textspan.style=position

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<p id="demo"></p>
</body>
</html> 
<script>
let textSpan=document.createElement("span")
        textSpan.id = "Count"
        textSpan.style.padding="10px"
        textSpan.innerHTML="x0"
        textSpan.style="position: absolute;left: 100px;bottom: 50px;"
        
        
let img = document.createElement("img");
        img.src="https://www.w3schools.com/howto/img_snow_wide.jpg";
        img.id="icon"
        img.style.display ="flex";
        img.style.alignItems="center";
        img.setAttribute("height", "76.8");
        img.setAttribute("width", "76.8");
let CountDiv = document.createElement('div')
        CountDiv.id= "CountDiv"
        CountDiv.style.position = 'absolute';
        CountDiv.style.top = 400 + 'px';
        CountDiv.style.left = 200+'px';
        CountDiv.style.background="white"
        CountDiv.append(img)
        CountDiv.append(textSpan)
 document.body.appendChild(CountDiv)
 

 
</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

"Create dynamic tables with AngularJS using ng-repeat for column-specific rendering

I have a model called Item with the following structure: {data: String, schedule: DateTime, category: String} I want to create a report that displays the data in a table format like this: <table> <tr> <th>Time Range</th&g ...

javascripthtmlangularjs

Improving the Performance of DisplayField Binding in ExtJS 5

When I trigger a window to create a new item, there is a noticeable lag when passing in the record for the bound fields. The record is essentially a blank one with default values provided by the framework. In this demo, there are 3 buttons: The first but ...

javascriptextjsdata-bindingextjs5

A HTML input field that allows for multiple values to be populated by autofill functionality, similar to the features found

Can anyone assist me with creating a text box similar to the one in Facebook's new message feature? In that feature, we are able to add multiple people in the 'To' field, all of whom are suggested from our friend list. I would like to implem ...

javascriptphpajax

Replicating form fields using jQuery

I have come across many questions similar to mine, but unfortunately none of them address the specific details I am looking for. On a single page, I have multiple forms all structured in the same way: <form> <div class="form-group"> ...

javascriptjqueryforms

Show a directional indicator on hover in the date selection tool

I am currently using a datepicker that looks like this: https://i.sstatic.net/XsrTO.png When I hover over it, three arrows appear to change days or show the calendar. However, I would like to remove these arrows. Here is the code snippet: link: functi ...

javascriptjqueryhtmlcssdatepicker

Dragging elements with jQueryUI multiple times

Is there a way to configure drag and drop functionality so that one element can be dragged multiple times? I attempted to create something similar to this http://jsfiddle.net/28SMv/3/, but after dragging an item from red to blue, the element loses its abi ...

javascriptjquery-ui

Is the canvas refusing to disappear?

My HTML5 Canvas element is not disappearing as expected. I wrote a timer function to hide the element when the timer hits 0. I tested this using an alert flag and it worked perfectly. Problem: if (TotalSeconds <= 0) { ctx.clearRect(0, 0, canvas.w ...

javascriptjqueryhtmlcanvas

Compatibility issues between jQuery and AngularJS are causing problems

Currently, I am facing a compatibility issue between RequireJS and Angular in my setup. Everything functions without any problems when using jQuery version 1.7.2. However, I wanted to upgrade to jQuery 1.8.1 along with jQuery UI, but unfortunately, my Angu ...

javascriptjqueryjquery-uirequirejsangularjs

The JSON response did not contain the expected property in Javascript

Currently, I am developing a weather widget using React that displays temperature and rain forecast. The data is fetched from OpenWeather API and the JSON response structure is as follows: //rainy day 0:{ main: { temp:10} rain: { 3h: 1000} } / ...

javascriptjsonreactjs

How can I make my div disappear when I click outside of it using jQuery? I am finding the solution on Stack Overflow to be confusing

Utilizing jQuery to conceal a DIV upon clicking outside of it Although I've heard positive feedback about this method, I'm uncertain about its functionality. Can someone provide an explanation? I understand that .has() identifies elements contai ...

javascriptjqueryhtmlcss

Change the selection so that only the initial one appears in gray

Is there a way to make the text inside a select field gray out when the first option is selected? Can this be accomplished with just CSS or does it require JS? I have attempted altering the style of the first option, but it only affects the text color in ...

htmlcss

Tips for reliably resizing slider images with varying widths

I am trying to scale '.slick-slide img' by height because the images vary in width. Scaling them by width would result in inconsistent proportions. However, when I apply a dimension to the height property for '.slick-slide img', the ima ...

htmlcss

Incorporating a parameter into a <div> only when the parameter holds a value

Being new to web development, I have a rather basic query. If the datainfo prop variable is not empty, I'd like to include a data attribute in the div tag. <div style={{height: props.height - handleHeight()}} data={datainfo ? datainfo : ""}> C ...

javascriptreactjstypescriptjsx

jspdf generates blank PDF files

I am trying to use JsPDF to generate a PDF from content within a Section tag. I have followed various guides but none of them seem to be working for me. Since there is no demo code available, I am turning to this platform in hopes of finding a solution. A ...

javascriptjqueryjspdf

Utilizing AngularJS to iterate over a single extensive unordered list

In my current Angular app, the JSON structure is as follows: 0: Object $$hashKey: "004" Date: "2014-04-17" Items: Array[3] 1: Object $$hashKey: "005" Date: "2014-04-18" Items: Array[3] 2: Object $$hashKey: "006" ...

javascriptjqueryjsonangularjs

Encrypting data using NodeJS Crypto and decrypting it in front-end JavaScript

I'm currently on the hunt for a way to perform AES256 CBC decryption on the client side. When working with nodeJS, I typically utilize this function for encryption: exports.encrypt = function(txt, cryptkey){ var cipher = crypto.createCipher(' ...

javascriptnode.jsencryption

Image transformed by hovering effect

I've been attempting to add a hover effect to the images in my WordPress theme. The images are displayed in a grid format, created by the featured image on the posts. The grid layout is controlled within content.php <?php /** * controls main gri ...

javascriptjqueryhtmlcsswordpress

Is it possible to use an onclick function to input JavaScript values into a password entry box seamlessly?

Is there a way to input password values continuously using a JavaScript onclick function into a password field? I have two images, one 'Blue' and one 'Red', that trigger an onclick function with the following values: Blue= w3! Red= T4 ...

phpjavascripthtmlcss

Creating a layout with Bootstrap 4 cards split into two rows

I need to change my layout from 3 columns to 2 columns. I know I can achieve this using CSS like the code snippet below, but I'm curious if there's a built-in Bootstrap method for this: .card-columns { -webkit-column-count: 2; -moz-column-co ...

csstwitter-bootstrapbootstrap-4

Guide on adding JSON data from a web service whenever a function is invoked in AngularJS

I am currently calling the getData function every second and everything is working fine except for the appending functionality. Whenever the function is called, AngularJS replaces the old data with new data, but I actually want to append the new data aft ...

javascriptangularjsjsonhtmlweb-services