Create html div with Js - javascript

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

Related

Add loaded content to bottom of page

I get a page via ajax, how can I append that page to the current page?
I've looked at:
var div = document.createElement('div');
div.innerHTML = 'Your content, markup, etc.';
target.parentNode.insertBefore( div, target );
But I do not want to create a wrapper element - and just want to add the loaded page on to the bottom of the content. is this possible?
Vanilla javascript only please.
Is it it you are looking for?
var div = document.createElement('div');
div.innerHTML = 'test2';
var target = document.getElementById('target');
target.insertAdjacentElement('afterend',div);
or directly to end of body
var div = document.createElement('div');
div.innerHTML = 'test2';
var target = document.body.insertAdjacentElement('beforeend',div);

Create new DIV using Javascript according to Class

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>

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>

Creating div on button click with Javascript not working?

I have a button in a webpage that is linked to a Javascript function, which creates a div as follows:
function creatediv(){
var div = document.createElement('div');
div.innerHTML = document.getElementById('innerhtmlbox').value;
document.body.appendChild(div);
}
However, it is not working. Can anyone give me any advice?
Try this:
function createDiv() {
let div = document.createElement('div');
div.innerText = document.getElementById('getText').innerText;
document.body.appendChild(div);
}
<button onClick="createDiv()">Click me!</button>
<div id="getText" style="display: none;">
INNER TEXT
</div>
You need to use innerText
function creatediv() {
var div = document.createElement('div');
div.innerHTML = document.getElementById('innerhtml').textContent;
document.body.appendChild(div);
}
creatediv();
http://jsfiddle.net/e8jn9pj5/3/
Or if you are populating it from button's value you may use .value as suggested by adeneo http://jsfiddle.net/t4c5yq24/

How do I add a className to a div tag in JavaScript?

See my code below:
var newcontent = document.createElement('div');
newcontent.innerHTML = 'draggable';
newcontent.className = 'myclass';
document.body.appendChild(newcontent.firstChild);
You need to append newcontent, Currently you are appending newcontent.firstChild which is a text node thus css class has no impact.
var newcontent = document.createElement('div');
newcontent.innerHTML = 'draggable';
newcontent.className = 'myclass';
document.body.appendChild(newcontent);
.myclass {
color: red
}
Your approach is perfectly fine. But you should declare your css class in your code, so that it will picked correctly by the element.
.myclass {
color: red
}
Here goes your code:
var newcontent = document.createElement('div');
newcontent.innerHTML = 'draggable';
newcontent.className = 'myclass';
document.body.appendChild(newcontent.firstChild);
$("body" ).append("<div class='myclass'>draggabble</div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
you can try this

Categories