why is the insertBefore showing error - javascript

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>

Related

Creating HTML element via javascript not working

I'm currently a newbie to javascript just started learning on how to create new DOM element using the javascript function document.createElement(). The problem is that I'm getting really confused by all these function.The code be low is what I'm trying to create
I'm getting confused on how to append these element to the element having the id "date". Here is what i've done so far
function createElements(){
//creating <div class="divider"></div>
var div = document.createElement('div');
var attributeDivider= document.createAttribute('class');
attributeDivider.value="divider";
div.setAttributeNode(attributeDivider);
//creating <div class="section"></div>
var div2 = document.createElement('div');
var attributeSection = document.createAttribute('class');
attributeSection.value ="section";
div2.setAttributeNode(attributeSection);
//creating h5
var h5 = document.createElement('h5');
var attributeH5 = document.createAttribute('id');
attributeH5.value ="test";
// creating stuff
var stuff = document.createElement('Stuff');
// creating date
var date = document.getElementById("date");
date.appendChild(h5);
}
<!--This_is_where_I_need_to_append the created elements-->
<p id="date">Date Created</p>
<!--The elements that I need to create-->
<div class="divider"></div>
<div class="section">
<h5>Section 1</h5>
<p>Stuff</p>
</div>
Could someone help me ?
You were creating the elements, however, you were not adding them to the HTML.
Try following
function createElements() {
//creating <div class="divider"></div>
var div = document.createElement('div');
var attributeDivider = document.createAttribute('class');
attributeDivider.value = "divider";
div.setAttributeNode(attributeDivider);
//creating <div class="section"></div>
var div2 = document.createElement('div');
var attributeSection = document.createAttribute('class');
attributeSection.value = "section";
div2.setAttributeNode(attributeSection);
// Appending section div to divider div
div.appendChild(div2);
//creating h5
var h5 = document.createElement('h5');
// Adding content
h5.textContent = "Section 1";
// Appending h5 to section div
div2.appendChild(h5);
// creating stuff
var stuff = document.createElement('Stuff');
// Adding content
stuff.textContent = "Stuff";
// Appending stuff element to section div
div2.appendChild(stuff);
// Getting date element
var date = document.getElementById("date");
// Appending the structure created above
date.appendChild(div);
}
createElements();
<p id="date">Date Created</p>

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>

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/

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/

Categories