We Keep Coding

Creating a div by pressing a button [duplicate]

This question already has answers here:
Click through div to underlying elements
(17 answers)
Closed 2 years ago.
I was trying to create Divs by clicking a button but it just fill the button range with red.
<div class="app">
<button onclick="createDiv()">Make a cube</button>
</div>
<script>
function createDiv ()
{
var boxEle = document.querySelector('.app');
boxEle.style.width = 100;
boxEle.style.height = 100;
boxEle.style.backgroundColor = '#f00';
}
</script>

Your not off by much. You were selecting the div you already created in the html, and some of your js syntax is off.
Try this jsFiddle
function createDiv ()
{
var boxEle = document.createElement('div');
var container = document.querySelector('.app');
boxEle.style.width = '100px';
boxEle.style.height = '100px';
boxEle.style.backgroundColor = '#f00';
container.appendChild(boxEle);
}

Firstly , in your function you are selecting an already created div in your html, so you are not creating a div. If you want to create a div using javascript you can do it like this.
function createDiv() {
let box = document.createElement('div'); // creates div
box.classlist.add('box-styling') // you can add a class and style it using that instead
let container = document.querySelector('.container') // div has to be placed somewhere in html, so create a container and select it.
container.appendChild(box) // then append to container
}

This should do it:
<div class="app">
<button onclick="createDiv()">Make a cube</button>
</div>
<script>
function createDiv () {
var boxEle = document.querySelector('.app');
var newDiv = document.createElement('div');
newDiv.style.width = 100;
newDiv.style.height = 100;
newDiv.style.margin = 5;
newDiv.style.backgroundColor = '#f00';
boxEle.appendChild(newDiv);
}
</script>

Adding selected number of divs inside another div

Im trying to create an app that will roll number of dice decided by the user.
I want every dice to be in a separate div but I struggle to implement a code inserting divs into HTML.
As a test I created a button that would insert a single div into another div, here is what I got so far:
<div id="diceTable">
<button onclick="addDice()">Add Dice</button>
</div>
JS being:
function addDice(){
var div = document.createElement('div');
div.innerHTML = "<p> here will be a dice</p>";
div.getElementById('dice').appendChild(div);
}
But it doesnt seem to work. Maybe im using wrong methods.

Small typo - use document.getElementById('dice').appendChild(div) instead of div.getElementById('dice').appendChild(div).
function addDice() {
var div = document.createElement('div');
div.innerHTML = "<p> here will be a dice</p>";
document.getElementById('dice').appendChild(div);
}
<div id="diceTable">
<button onclick="addDice()">Add Dice</button>
</div>
<div id='dice'></div>

This is straight out of W3C school https://www.w3schools.com/jsref/dom_obj_div.asp
<script>
function myFunction() {
var x = document.createElement("DIV");
var t = document.createTextNode("This is a div element.");
x.setAttribute("style", "background-color: pink;");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
Use append.child rather than innerHTML

How to create div with different class on button click?

I was creating a html that would create a div and copy the things in input to that div with a button click.
Like this:
HTML
<input type="text">
<button>Copy</button>
<p></p>
Script
$('button').click(function() {
var div = document.createElement('div');
$('p').append(div);
$('div').html($('input').val());
});
At it worked perfectly
And then i added class to it.
It looks like this:
$('button').click(function() {
var div = document.createElement('div');
div.className = "Someclass";
$('p').append(div);
$('div').html($('input').val());
});
It worked fine as well. But when i click the button it copies the text to all the div's Instead of a single one
How can i create a button that creates different div with different class and which copies text from <input> to the newly created div
I found on net that i can use the i++ thing in javascript for different class.
But that code is not working properly. Please tell me what is the mistake here.
My code looks like this:
$('button').click(function() {
var i = 0;
var div = document.createElement('div');
div.className = "Someclass" + i++;
$('p').append(div);
$('div').html($('input').val());
});

You can do it like this:
var clickCount = 0;
$('button').click(function() {
var html = $('input').val();
var classname = 'someclass' + clickCount++;
$('<div>').addClass(classname).html(html).appendTo('p');
});

take out i from click event
select new div with its corresponding class name .Someclass[i]
change your code like this:
var i = 0;
$('button').click(function() {
var div = document.createElement('div');
div.className = "Someclass" + i;
$('p').append(div);
$('.Someclass' + i).html($('input').val());
i++;
});

Rather use .addClass jquery method:
$( "div name" ).addClass( "yourClass" );

Its doing that because you have this line
$('div').html($('input').val());
You can change it to
$('p div').html($+'input').val());

You should give the precise class name like 'Someclass'+i with " i " the last index of the class you added.
$('button').click(function() {
var i = 0;
var div = document.createElement('div');
div.className = "Someclass" + i++;
$('p').append(div);
$('Someclass'+i).html($('input').val());
});
Your code looks like it will add only one div by click and that div will be given the value of input.

You are appending html to all div present.Do this add content to it before appending
var i=0;
$('button').click(function() {
var div = document.createElement('div');
div.className = "Someclass" + i++;
$(div).html($('input').val());
$('p').append($(div));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
<button>Copy</button>
<p></p>

Create html div with Js

I am trying to create html code like this in js
This is html code how i want to get with javascript
<div id="windwo">
<div id="windowhead">
</div>
</div>
And this is Javascript code test
var div = document.createElement('div');
div.id = 'window';
var div = document.createElement('div');
div.id = 'windowhead';
document.body.appendChild(div);
document.body.appendChild(div);
And out put of javascript code is
<div id="windowhead"></div>
Someone can tell me which i mistake done ?

You need two DIV variables and to append the second DIV to the first:
var div = document.createElement('div');
div.id = 'window';
var div2 = document.createElement('div');
div2.id = 'windowhead';
div.appendChild(div2);
document.body.appendChild(div);
You were essentially overwriting the first DIV with the second DIV.

var $widow = $('<div>', { id: "widow" });
$widow.append( $('<div>', { id: "widowhead"}) );
$('body').append( $widow );

You are appending the same element twice. so just Change your JS as follows
var div1 = document.createElement('div');
div1.id = 'window';
var div2 = document.createElement('div');
div2.id = 'windowhead';
document.body.appendChild(div1);
div1.appendChild(div2);

issues inserting a div from Javascript

I'm trying to add a div with some text before another div in the document.
Here's my script in a nutshell, assume init() gets called when onload page:
<head>
<script type="text/javascript">
function init () {
var div = document.createElement('div').className = 'title';
div.innerHTML = 'Hello';
var reference = document.getElementById('content');
document.body.insertBefore(div, reference );
}
</script>
</head>
<body>
<div id="content">blah blah</div>
<br /><br />
</body>
I get a type mismatch error on document.body.insertBefore(div, reference), Can someone please let me know what i'm doing wrong?

Try
function init () {
var div = document.createElement('div');
div.className = 'title';
div.innerHTML = 'Hello';
var reference = document.getElementById('content');
document.body.insertBefore(div, reference );
}
You were setting the div to the string title I think (never checked)
Yep here you go
http://jsfiddle.net/FxFzc/