Adding a div beside an input element - step by step guide

When creating an input field in my code, I followed these steps:

var inputVal = document.createElement("input");

inputVal.setAttribute("type", "checkbox");
inputChek.onchange = select;
inputChek.setAttribute("value", title);

//inputChek.after(sortDiv);
docClass.prepend(inputChek);
docClass.append(newDiv);

However, I encountered an issue where the div with the arrow image was not appearing as expected. The div was being created, but it appeared below the text instead of alongside it.

To address this issue, I added a new div as follows:
var newDiv = document.createElement("div");

newDiv.setAttribute("class", "Arrow");
newDiv.setAttribute("onclick",'divClick("title")');
newDiv.style.background = "red";
newDiv.style.width = "10px";
newDiv.style.height = "10px";

After adding the new div, I expected the following image to be displayed next to the text: https://i.sstatic.net/wYazj.png Does anyone have a solution for this display issue?

javascripthtmlcss

Answer №1

Here is an example demonstrating how to dynamically add a div element after an input field.
Feel free to customize and style it according to your preferences:

var container = document.getElementById("container"),
    inputField = document.createElement("input"),
    newDiv = document.createElement("div");

inputField.type = "text";
inputField.placeholder = "Enter text here";

newDiv.className = "square";
newDiv.setAttribute("onclick",'displayMessage("Hello")');
newDiv.style.background = "blue";
newDiv.style.display = "inline-block";
newDiv.style.width = "50px";
newDiv.style.height = "50px";

container.appendChild(inputField);
container.appendChild(newDiv);

function displayMessage( message ){
  console.log('You have clicked on the square with the message: ' + message );
}
<div id="container" class="input-container"></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

What could be the reason for JSON refusing to accept an element from an array?

I am looking to retrieve the exchange rates for all currencies from an API using an array that lists all available currencies. Below is the JavaScript code I have written: var requestURL = 'https://api.fixer.io/latest'; var requestUrlstandard ...

javascriptarraysjsonfixer.io

Ways to access elements and their associated values in a JavaScript Array

I'm facing a challenge with a JavaScript array where I need to extract teams (Team A, Team B) and organize them into one array while preserving their order. See below for the current output of the array, as well as the JS code provided and the expecte ...

javascriptarraysjsonvue.js

Is there a way to identify all the elements that have properties like border and border-radius applied to them?

When looking for elements with certain properties, you can use queries like this; $$('*[title]') For example, if you want to find elements with a border or border-radius applied, standard queries may not work. $$('*[border-width]') // ...

csscss-selectors

Is it possible for me to adjust the size of the Facebook login button on my website?

I have implemented a Facebook login on my website using the following code: <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"> </fb:login-button> Is it possible to replace this button with a standard button or adjust ...

javascriptphpfacebook-javascript-sdkfacebook-login

Tips for avoiding the page from reloading when executing a query. I attempted using preventDefault(); which successfully prevented the reload, but it also stopped PHP

function createCounter() { var count = 0; return function () {return count += 1;} } var add = createCounter(); function updateDatabaseOnClick(){ document.getElementById("result").innerHTML = add(); } I'm currently working on implementing a co ...

phphtmlmysql

Ensure equal width for an HTML element by matching it with the dimensions

Hello, I am facing an issue with a dropdown button. Whenever I hover over it, the links to different pages drop down. However, I want the width of these links to be the same as that of the button. The size of the button varies as it is set to 100% width o ...

htmlcsshover

Ways to switch out the background image using jQuery

I am currently using jQuery to dynamically change the background image of a web page. Right now, I have implemented two separate buttons that toggle between Image A and Image B. By default, Image A is displayed on the page. My goal is to enhance this func ...

javascriptjqueryhtmlcss

The process for incorporating two distinct Google fonts into a Next.js project using Material UI

Currently in the process of upgrading my MUI5 application from Next 12 to Next 13 and experimenting with integrating next/font. In my previous Next 12 version, I utilized two Google fonts - 'Rubik' and 'Ephesis' which were included in t ...

cssnext.jsmaterial-uifonts

Changing a variable with Functions and Objects

I'm curious to know what the index variable returns in this code snippet. I believe it will be 0. function jsTest() { var index = 0; var counter = 0; var obj = {}; obj.index = index; var func = function () { for (index ...

javascript

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo

Instructions for integrating a select query within another select query in Codeigniter

I have a question regarding two tables shown below: /* questionnaire table */ | q_id | q_title | | ------- | ---------------------- | | 1 | What is your name? | | ------- | ---------------------- | | 2 | What is your gend ...

phphtmlcodeigniterselect

Having trouble getting Node.js, express, socket.io, and ejs to work together?

Currently, I am working on improving my knowledge of java-script and had the idea to create a basic chat app using Express, stock.io, and ejs. Unfortunately, I am facing some challenges in getting it up and running smoothly. Below is the snippet from my ...

javascriptnode.jsexpresssocket.ioejs

What is the process for adding to a highly nested array in mongoose?

Here is the Model I am working with: const MessagesSchema = mongoose.Schema({ //for individual message text: { type: String, required: true } }, { timestamps : true }) const MessagesCollectionSch ...

javascriptnode.jsmongodbmongoosemongodb-query

What is the best way to display a child element in the right panel?

Hello, I need help in displaying child elements next to the parent element. My function works fine the first time, but fails the second time. Here are the steps I followed: 1) Clicked the Add button 2 times, generating row2 as well as a submenu of firs ...

javascriptjquery

Prior to stacking the divs, separate the line within the div

In the process of creating a responsive navbar with Bootstrap, I encountered an issue. When resizing the window to a smaller size, the collapse icon shifts from the top right position below my "logo". Here is how the site appears on a regular screen: http ...

htmlcsstwitter-bootstrapresponsive-designresponsive

Full-screen Bootstrap burger navigation menu

Check out this code snippet on boot ply: I'm trying to create a full-screen menu with the same effect as the burger menu for non-mobile screens. Currently, the burger menu only shows up on mobile devices. Does anyone know how I can achieve this? Than ...

cssangularjstwitter-bootstrap

incorrect encoding of Greek characters due to the multer upload package

When uploading files with Greek characters, the uploaded titles are saved as ΠÏξ Îαξ & ÎαÏÏιμιÏαίοι Here is the code for multer variables inside a js file: const storage = multer.diskStorage({ destination: f ...

javascriptnode.jsnpmfile-uploadmulter

The ng-if condition is never met

I am currently utilizing AngularJS in my project. <div ng-repeat="l in kites"> <a ng-click="findit(l.green.num)">color</a> <span ng-if="c_{{l.green.num}} == 'y'>kites is </span> </div> Within my c ...

htmlangularjs

Tips on inserting an image within a div that is created dynamically

I'm currently working on creating dynamic div elements in my JavaScript using the code below: var div = $('<div id="a1"></div>').html("<font color=green>This is a demo</font>"); I am struggling to figure out how to ...

javascriptjquery

Creating an HTML table with jQuery

I've almost got it working, but something's missing. I'm creating an HTML table using JQuery with a list of names populating the first column. The structure is fine overall, including the header and colgroups. However, I'm having troubl ...

javascriptjqueryhtml