Create new DIV using Javascript according to Class - javascript

How do I convert this into Javascript? I'm trying to create more than 1 div of the same class but different images.
<div class="swiper-slide" style="background-image:url(image/test1.jpg)"></div>
<div class="swiper-slide" style="background-image:url(image/test2.jpg)"></div>
I tried this, but it doesn't work
var div = document.createElement('div');
div.className = 'swiper-slide';
div.style.backgroundImage = 'url("image/test1.jpg")';
div.style.backgroundImage = 'url("image/test2.jpg")';

You need to add
document.append(div)
Where 'document' can be any parent element.

You can try like this for multiple images
make the image names into array and loop it
var images = ['test1','test2','test3'];
for(var i=0;i<images.length;i++){
var div = document.createElement('div');
div.className = 'swiper-slide';
div.style.backgroundImage = 'url("image/'+images[i]+'.jpg")';
div.innerHTML="asd"+i;
document.getElementById('asd').append(div);
}
<body>
<div id="asd">
</body>

Related

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>

Is there any way I can make 200 similar divs with different files (page0.svg, page1.svg..., page200.svg)

<div class="mySlides">
<img src="1173/page0.svg" style="width:50%">
</div>
<div class="mySlides">
<img src="1173/page1.svg" style="width:50%">
</div>
So I need to make about 200 div codes like the above with different .svg files, and the only thing that changes in the file name is the number. I'm trying to create a digital book, and I have all the pages in .svg format.
Sure, there are lots of different ways to do this. As suggested above you can use a fragment to give you better performance than adding 200 divs to the DOM sequentially.
var fragment = document.createDocumentFragment();
for(i=0;i<200;i++){
var new_div = document.createElement("div");
new_div.classList.add("mySlides");
new_div.innerHTML += '<img src="1173/page'+i+'.svg" style="width:50%">';
fragment.appendChild(new_div);
}
document.body.appendChild(fragment);
See it running here: https://codepen.io/67hours/pen/gBMygW
In pure JS, you could write something like this. Using document.createElement and then appending the new elements to the parent container is a far superior approach to manipulating the DOM than that of HTML string manipulation/concatenation with elements' innerHTML attributes.
Substitute the hard-coded loop limit for a variable representing the actual number (assumes as well you have a 0.svg):
var IMAGE_COUNT = 200;
for (var i = 0; i < IMAGE_COUNT; i++) {
var frag = document.createElement("div");
var img = document.createElement("img");
frag.classList.add('mySlides');
frag.style = "width:50%;";
img.src = '1173/page/' + i + '.svg';
frag.appendChild(img);
document.body.appendChild(frag);
}
Use for loop upto 200 and generate html dynamcally and append that to parent div
var container = document.getElementById("container");
var html = "";
for(var i=0;i<=200; i++)
{
html += "<div class='mySlides'><img src='1173/page"+i+".svg' style='width:50%'></div>";
}
conatiner.innerHTML = html;
HTML
<div id="container">
</div>

why is the insertBefore showing error

I intend to create a new Div element via javascript, but i am having problem appending my code to the DOM
<div id="container">
<div id="content"></div>
</div>
<script>
var container = document.getElementById('container');
function divCreate() {
var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello this is
div via javascript!');
newDiv.appendChild(newContent);
var currentDiv = document.getElementById('content');
document.body.container.insertBefore(newDiv, currentDiv);
}
divCreate();
</script>
my actual intention was to insert the new div before the content inside the container. I do understand the DOM as a tree of objects and hierarchy too.I thought that i could navigate the tree via this hierarchy . that is from document--->body----->container.
It did worked on the container, but not the content div. Could someone please tell what I am missing here?
I did try to append the newDiv to the DOM before the content, but I was unable. I was able to append it to the container DIV which is a parent of the content Div. my main concern is why ami unable to append it before the content using the insert before method.
I thought that i could navigate the tree via this hierarchy . that is from document--->body----->container.
You can't.
Use document.getElementById() to get an element by its ID.
try this
<div id="container">
<div id="content">
</div>
</div>
<script>
var container = document.getElementById('container');
function divCreate() {
var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello ....');
newDiv.appendChild(newContent);
var currentDiv = document.getElementById('content');
document.body.container.insertBefore(newDiv,currentDiv}
divCreate();
</script>
<div id="container">
<div id="content">
</div> </div>
<script>
var container = document.getElementById('container');
function divCreate() {
var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello this is a div is added via javascript');
newDiv.appendChild(newContent);
var currentDiv = document.getElementById('content');
container.insertBefore(newDiv, currentDiv);
}
divCreate();
</script>

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);

How do you use Javascript to add or remove HTML/CSS code?

If I have a bunch of HTML code, similar to the following:
<div id='test0div'>
<p id='test0'></p>
</div>
How do I use JavaScript to add or remove more of those - i.e.
<div id='test1div'>
<p id='test1'></p>
</div>
<div id='test2div'>
<p id='test2'></p>
</div>
...etc.?
var container = document.createElement("div");
for(var i=0; i<5; i++) { // change i <5 as per your data source
var div = document.createElement("div");
var p = document.createElement("p");
p.id = "test"+i;
div.id = "test"+i+"div";
div.appendChild(p);
container.appendChild(div); // you can event append to particular id or body
}
// document.getElementById("divId").appendChild(container);
container, will have all the divs & p as you wish
This will give you the output you want. Just change the number of times the loop will execute based on your wish.
To remove you could use
$('#id').remove();
To add you could use
$("<div id='new'></div>").appendTo('#id');

Categories