To identify the dynamically inserted and generated div element amidst the other elements on the page

My goal is to have a new div generated and inserted over the other elements on the page when a button is clicked. Here is the markup I've written:

<div id="parent">
    <div id="d1">
    </div>
    <div id="d2">
    </div>
    <div id="d3">
    </div>
    <input type="button" id="but"/>
</div>

Here are the styles:

#d1{
    width:200px;
    height:200px;
    background-color: black;
}
#d2{
    width:200px;
    height:200px;
    background-color: aqua;
}
#d3{
    width:200px;
    height:200px;
    background-color: blue;
}

And here is the script I'm using:

var but=document.getElementById("but");
var d3=document.getElementById("d3");
var p=document.createElement("div");
p.setAttribute("style", "position:absolute; top:400, background-color: grey;width:10px; height:10px;");
var parent= document.getElementById("parent");
but.onclick=function(){
    parent.insertBefore(p,d3);
}

However, when I click the button, the new div gets inserted under the other divs instead of over them. You can see an example of this behavior in this jsFiddle. How can I fix this issue?

Answer №1

It appears that there was a small mistake in your code where you mistakenly used a comma instead of a semicolon after setting top:400 :

position:absolute; top:400, background-color: grey;

The corrected version should look like this:

position:absolute; top:400; background-color: grey;

Check out the demo here: http://example.com/demo

Answer №2

If you want to enhance the colors on your page, consider utilizing JQuery's append(); method to layer additional hues on top of those already set.

$('button').click(function () {
    $('#over').append('<div id="dt"></div>');
});

To see this technique in action, check out this Fiddle: http://jsfiddle.net/jLCuD/

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

Exploring the World of AJAX with CodeIgniter

I've been on the hunt for a solid working example of using AJAX with Codeigniter, but most resources I've found are outdated. As an AJAX beginner, I'm struggling to find up-to-date tutorials. What I'm aiming for is an input form on a w ...

What is the best Document Object Model (DOM) to utilize alongside Spider

I want to incorporate the GoogleMaps JavaScript library into SpiderMonkey using the python wrapper, but the absence of a DOM is hindering my progress. Is there a method to inject a DOM into this setup in order to successfully make it function? ...

What is the best way to send a string without using quotation marks as a parameter in a function?

If I have an API that takes the query as http://localhost:8000/api/v1/rental/?place__startswith=kathmandu, how can I implement a generic search in ReactJS? What I attempted to do is pass the default parameter as search(query=kathmandu) so that the result ...

Utilizing the "each" function in jQuery to create click events for buttons that are linked to specific paragraphs

Right now, I am facing a situation where I have three buttons, each assigned with an ID that matches their order. Upon clicking a button, the paragraph associated with that order should hide itself using .hide(). My challenge lies in finding out how to ut ...

Display drop-down item when selected for the first time and hide it when selected for the same item for the second time

Is there a way to display form input when "C" is selected and hide it when "A", "B", or "D" are selected? If "C" is selected again after initially showing the form input, should it be hidden? For example, if "C" is selected for the first time, the form inp ...

Utilizing float positioning in Responsive Web Design

Attempting to implement a two-column float CSS layout with specific width percentages. My CSS styles for the two columns are as follows: .div1 { width: 25%; float: left; } .div2 { width: 75%; float: right; } .container { width: 960px; } @media scr ...

Warning: Neglecting to handle promise rejections is now considered outdated and discouraged

I encountered this issue with my code and I'm unsure how to resolve it. DeprecationWarning: Unhandled promise rejections are deprecated. In the future, unhandled promise rejections will terminate the Node.js process with a non-zero exit code. This ...

Inaccurate window dimensions on iOS Chrome are causing issues with innerWidth and inner

After rotating my iOS device, Google Chrome version 104 seems to be reporting incorrect values for window.innerWidth and window.innerHeight. The discrepancy is noticeable when comparing the dimensions before and after rotation: Initially in portrait mode: ...

PHP time counting script

Can a countdown script be created using PHP? Websites like 4shared.com or megaupload.com utilize a similar script that starts counting from 20 seconds to 0. I am able to see how many seconds are left on the web page before I can click on the download but ...

Mastering the art of carousel div creation with Bootstrap

Is there a way to create a carousel in Bootstrap 3 where only one div slides at a time, instead of three? I attempted to use divs instead of images in the traditional carousel structure, but it's not functioning as expected. I'm looking for some ...

Adding Array Elements to List Elements

I am facing an issue while trying to display an array of items in a list. The problem is that when I click submit, it adds all the array items to each list item instead of adding one item each time. Here is the link to JSFIDDLE: https://jsfiddle.net/b7Lw ...

The title attribute fails to display the entirety of the content

My div has a title attribute with 4000 characters, but when I hover over it, the full content is not displayed. Is there a way to show the complete text? https://codesandbox.io/s/strange-hugle-mvwu5 ...

Ways to dynamically combine a group of objects

I'm grappling with a challenge involving an array containing two objects. After using Promise All to fetch both of these objects, I've hit a roadblock in trying to merge them dynamically. Despite experimenting with various array methods like map, ...

Picking Layers on Google Maps with Three.js

I have incorporated the google-maps-api-threejs-layer library into my project from this source. Now, I am looking to implement a picking feature. Here is the modified code snippet: <!doctype html> <html> <head> <meta charset=&qu ...

Retrieving information from Node.js Serialport

I am interested in reading the data received after sending an ascii command to my lock controller. Here is the code that sends the command to the lock controller: var express = require('express'); var router = express.Router(); var SerialPort = ...

What strategies can be used to scale up a website's images in proportion to their page views or traffic?

The situation: On my simple HTML website, I have a group of images placed side by side. Each image is connected to a specific article, and when you hover over the image, a detailed description of the linked article pops up in the center of the page. The o ...

Do not request for this element within the array

I have a function that applies to all elements in an array, except for the currently clicked one. For example: cubesmixed = [array, with, 145, elements] cubesmixed[54].click(function() { for(var i = 0; i < 145; i++) { var randomnumber=Math.flo ...

center items after aligning floats

Currently, I am in the process of creating a website using a mobile-first approach with media queries. As I progressed to a larger device, specifically a tablet, I had to utilize the float property on my .textcontainer element to ensure it aligned properly ...

issues with passing values on second click using ajax and jquery

Just starting out with JavaScript, jQuery, and AJAX and running into issues with a basic script to load more data from a database upon button clicks. The first load more button click works fine. But subsequent clicks do not pass values and do not execute. ...

Can different table headers be inserted under a Colspan?

I have been attempting to insert text above each column in Colspan without success. https://i.sstatic.net/MxQPj.png shows the image of how I want the columns in colspan to be displayed as 1 2 3 4 5 O, but I am unsure of how to achieve this. Here is an exam ...