I'm trying to add a div using javascript. The div is appearing in the code and in chromes developer tools but not showing in the actual window ?
Why is this happening, how can I correct this ?
Code:
<div id='body'>
<div id='inner'>div here</div>
</div>
<script>
function add() {
var inner = document.getElementById('inner');
var div = document.createElement('div');
div.style.height = '300px';
div.style.width = '100px';
div.style.color = 'blue';
inner.appendChild(div);
}
add();
</script>
You have set text color, not background-color. So it is there, it's just that it has no content so you can't see it. I assume you meant this:
div.style.backgroundColor = 'blue';
Try this code, it's working for me.
you have to add onload() in body tag
<html>
<head>
<script>
function add() {
var inner = document.getElementById('inner');
var div = document.createElement("div");
div.style.width = "300px";
div.style.height = "100px";
div.style.background = "blue";
inner.appendChild(div);
}
</script>
</head>
<body onload ="add()">
<div id="inner"></div>
</body>
</html>
Related
I'm trying dynamically add a div to a page. This is in Chrome. I've looked at several instructions pages. Seems like this should work, but no joy. I added style attributes that would make it obviously apparent, just to get started. The code is executed, per "Inspect", but no element is appearing. Also the element does not show up in "Inspect/Elements/Find".
function CreateDragClone(partType) {
var cloneContainer = document.createElement("div");
cloneContainer.setAttribute("id", "cloneDiv");
//cloneContainer.setAttribute("class", "closeContainer");
cloneContainer.style.visibility = "visible";
cloneContainer.style.position = "absolute";
cloneContainer.style.borderStyle = "solid";
cloneContainer.style.borderColor = "red";
cloneContainer.style.borderWidth = "1px";
cloneContainer.style.top = "200px";
cloneContainer.style.left = "200px";
cloneContainer.style.zIndex = "100000";
document.body.append(cloneContainer);
}
With this code you should get a little red dot representing de borderWidth;
Your code is almost done, you just forgot to add width and height to the div element, on the other hand, camelCase shouldn't have the first letter in uppercase.
(function createDragClone() {
const cloneContainer = document.createElement("div");
cloneContainer.setAttribute("id", "cloneDiv");
cloneContainer.style.visibility = "visible";
cloneContainer.style.position = "absolute";
cloneContainer.style.borderStyle = "solid";
cloneContainer.style.borderColor = "red";
cloneContainer.style.borderWidth = "1px";
cloneContainer.style.top = "200px";
cloneContainer.style.left = "200px";
cloneContainer.style.width = "200px";
cloneContainer.style.height = "200px";
cloneContainer.style.zIndex = "100000";
document.body.append(cloneContainer);
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
You need to specify height and width to the created element.
One more thing, partType is passed as an argument but not being used, so you can remove it.
function CreateDragClone() {
var cloneContainer = document.createElement("div");
cloneContainer.setAttribute("id", "cloneDiv");
//cloneContainer.setAttribute("class", "closeContainer");
cloneContainer.style.visibility = "visible";
cloneContainer.style.position = "absolute";
cloneContainer.style.borderStyle = "solid";
cloneContainer.style.borderColor = "red";
cloneContainer.style.borderWidth = "1px";
cloneContainer.style.top = "200px";
cloneContainer.style.left = "200px";
cloneContainer.style.zIndex = "100000";
cloneContainer.style.width = "100px";
cloneContainer.style.height = "100px";
document.body.append(cloneContainer);
}
CreateDragClone();
I am trying to get my div element to the center of the screen that I have aligned to the center but the top margin is still stuck on the top and not centered.
I have tried divElement.style.marginTop = "100px"; but that didn't change anything.
//this is the javascript
function stopDesc(){
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="0 auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";
// Adding a paragraph
var paragraph = document.createElement("P");
var text =
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
}
Right now the div is centered but the top is stuck to the top of the screen and I want it in the center or at least 100px down from the top.
Edit this line:
divElement.style.margin="0 auto";
and make it:
divElement.style.margin="100px auto";
maybe you've added divElement.style.marginTop = "100px" above that line of code so that it was overriden.
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="100px auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";
// Adding a paragraph
var paragraph = document.createElement("P");
var text =
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
I'm making an rgb guesser game for school, and the stretch goal I'm trying to reach is "making divs in javascript". For some reason, my divs aren't appearing when I'm making them. Here's the javascript code snippers
dothething()
function dothething(){
divs = MakeDivs(4);
var randomcolor = Math.floor(Math.random()*4);
WinningDiv = divs[randomcolor];
}
function MakeDivs(X){
for(i = 0;i<=X;i++){
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
}
console.log(divs)
var container = document.getElementById("container")
container.appendChild(div);
return divs
}
and here's some filler html
<body>
<div> FillerDiv</div>
</body>
You need to include the append inside the loop and use a correct control to append your DIV. Also in case you want to return your DIVs elements, add them to array and return them as in below code:
function MakeDivs(X){
var divs = [];
for(i = 0;i<=X;i++){
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
document.body.appendChild(div);
divs.push(div);
}
console.log(divs)
return divs
}
You have to embed container.appendChild(div); inside the loop. In your original code, you have just appended the last div.
function MakeDivs(X){
var container = document.getElementById("container");
var divs = [];
for(i = 0;i<=X;i++){
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
divs.push(div);
container.appendChild(div);
}
console.log(divs);
return divs;
}
You forgot to append the div to the container.
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
container.appendChild(div);
Missing array of divs.
Incorrect way to apply width and height.
div.height = "100px";
^
div.width = "125px";
^
dothething()
function dothething() {
divs = MakeDivs(4)
var randomcolor = Math.floor(Math.random() * 4)
WinningDiv = divs[randomcolor]
}
function MakeDivs(X) {
var container = document.getElementById("container");
var divs = [];
for (i = 0; i <= X; i++) {
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.style.height = "100px";
div.style.width = "125px";
container.appendChild(div);
divs.push(div);
}
//console.log(divs)
return divs
}
#container div {
background-color: lightgreen;
}
<div>
FillerDiv
<div id='container'></div>
</div>
This is helpful for you. Without defining HTML tag ID you are getting Id container. The variable should be defined before use anywhere.
You missed divs array to define. You should add every div in the loop.
dothething()
function dothething(){
var divs = MakeDivs(4)
var randomcolor = Math.floor(Math.random()*4)
WinningDiv = divs[randomcolor]
}
function MakeDivs(X){
var container = document.getElementById("container");
var divs = [];
for(i = 0;i<=X;i++){
var div = document.createElement("div");
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
div.innerHTML = 'Test'+i;
divs.push(div);
container.appendChild(div);
}
console.log(divs);
return divs
}
<body>
<div id="container"> FillerDiv</div>
</body>
You can use documentFragment for creating a block which contains all the colored divs. I've refactored a little bit your code. You can check the solution on jsfiddle - https://jsfiddle.net/2zcg59sd/ or you can run the snippet here.
dothething()
function dothething(){
var divs = MakeDivs(4) ;
document.getElementById("randomColors").appendChild(divs);
}
function MakeDivs(X){
var docFragment = document.createDocumentFragment();
for(i = 0;i<=X;i++){
var randomcolor = Math.floor(Math.random()*900000) + 100000;
var newDiv = document.createElement("div");
newDiv.style.borderRadius = "50%";
newDiv.style.height = "100px";
newDiv.style.float = "left";
newDiv.style.width = "125px";
newDiv.style.backgroundColor = "#" + randomcolor;
docFragment.appendChild(newDiv);
}
return docFragment
}
<div> FillerDiv</div>
<div id="randomColors"></div>
I created a chrome extension that inserts some html into a page (see screenshot below of how it looks...top right corner is the inserted HTML).
I want to create functionality such that when the user clicks the "Skip for now" text, the inserted HTML should disappear or be hidden. I'm having a difficult time doing that within my current code.
Inject.js gets called through this function:
chrome.tabs.executeScript(tab.ib, {
file: 'inject.js'
});
Inject.js (I'm not sure how to write a new function to hide all the elements that were created below and how to call that function from the HTML section at the bottom):
(function() {
// Create div
var div = document.createElement('div');
// Div styling
// Positioning
div.style.position = 'fixed';
div.style.boxSizing = 'border-box';
div.style.display = 'block';
div.style.zIndex = 10000000;
div.style.top = '20px';
div.style.right = '20px';
// Size
div.style.height = '130px';
div.style.width = '330px';
// Padding
div.style.paddingTop = '20px';
div.style.paddingBottom = '20px';
div.style.paddingLeft = '20px';
div.style.paddingRight = '20px';
div.style.borderRadius = '25px';
// Text
div.style.textAlign = 'center';
div.style.fontSize = '11px';
// Color
div.style.backgroundColor = '#505F69';
div.style.color = 'white';
div.style.border = '2px solid grey';
// HTML
div.innerHTML += '<u>Click to activate your To a Cause donation.</u><br><br>';
div.innerHTML += '<u>Skip for now</u>';
// Append
document.body.appendChild(div);
})();
You should create the skip button as an HTML node (like you did for the div) and append it to the div. Then you can do:
skipButton.onclick = () => {
document.body.removeChild(div);
};
basically, i have alot of image links, and i want these links to trigger a fixed overlap style but a unique image based on the image link clicked.
<img src="../Images/square 300/Drawing/angel face300.jpg" style='height: 300px; width: 300px;' onclick="imageurls(this, '../Images/A4/drawing/angel face.jpg')" />
^^one basic image link w/ onclick
<script>
function imageurls(elem, imgurl) {
var y = document.createElement("DIV").style.width = "100%";
y.class = "overlay-content"
var x = document.createElement("IMG").style.width = "100%";
x.setAttribute("src", imgurl);
x.setAttribute("width", "900");
x.setAttribute("height", "900");
x.setAttribute("alt", "_blank");
y.appendChild(x);
document.getElementById("Imagediv").appendChild(y).style.width = "100%";
}
function closeNav() {
document.getElementById("Imagediv").style.width = "0%";
}
</script>
^^ my java script, where the problem seems to be but im unsure what aspect of it is
<div id="Imagediv" class="overlay">
×
</div>
all my css styling works perfectly, and if i just use the document.get.element.... and remove the var x and y the overlay works.
variable declaration was wrong .use like this
var x = document.createElement("IMG")
var y = document.createElement("DIV")
Apply the style after the variable declaration.
remove the var x and y the overlay works.
Because the variable declaration was wrong so attributes was not append into the newly created element
function imageurls(elem, imgurl) {
var y = document.createElement("DIV")
y.style.width = "100%";
y.class = "overlay-content"
var x = document.createElement("IMG")
x.style.width = "100%";
x.setAttribute("src", imgurl);
x.setAttribute("width", "900px");
x.setAttribute("height", "900px");
x.setAttribute("alt", "_blank");
y.appendChild(x);
document.getElementById("Imagediv").appendChild(y).style.width = "100%";
console.log(document.getElementById('Imagediv').innerHTML)
}
function closeNav() {
document.getElementById("Imagediv").style.width = "0%";
}
<div id="Imagediv" class="overlay">
×
</div>
<img src="../Images/square 300/Drawing/angel face300.jpg" style='height: 300px; width: 300px;' onclick="imageurls(this, '../Images/A4/drawing/angel face.jpg')" />