How to create div in javascript for each create elements(DOM) and retrieve their values?
for (i = 1; i <= 3; i++) {
var input = document.createElement('input');
input.setAttribute("id", "x" + i);
var div = document.createElement('div');
div.id = "div"+i;}
I'm assuming you want to append all of your inputs into your divs and then your divs into the body.
Use the function appendChild, which is available on all DOM nodes, furthermore, your code will not work since inputVN is undefined.
you can try with this
document.body.appendChild(element);
example for create a div with javascript
var Div = document.createElement('div');
Div.id = 'DivId';
document.body.appendChild(Div);
this is a little example how create a div, you can try with these
Related
I'm going to load several new elements (via AJAX) into the DOM. After that I want to "refresh" the document variable to select existing and new elements.
I tried to simplify my question with this small example:
// Creating a new element and insert it into DOM
var newdiv = document.createElement('div');
newdiv.style.color = 'red';
newdiv.innerHTML = 'this is a new div container';
newdiv.classList = 'newdiv';
document.getElementById('existingdiv').appendChild(newdiv);
// Search the complete DOM for the new element and try to select it (but abc is null)
var abc = document.querySelector('newdiv');
abc.style.color = 'blue';
Any ideas (without jQuery)?
newdiv is a class not an element. To target that you have to specify dot (.) along with class name in the selector:
var abc = document.querySelector('.newdiv');
After that I want to "refresh" the document variable to select existing and new elements.
There's no need, document is live.
querySelector('newdiv') looks for an element with the tag name newdiv. You probably meant querySelector('.newdiv'), which looks for the first element with that class in the DOM.
Live Example:
// Creating a new element and insert it into DOM
var newdiv = document.createElement('div');
newdiv.style.color = 'red';
newdiv.innerHTML = 'this is a new div container';
newdiv.classList = 'newdiv';
document.getElementById('existingdiv').appendChild(newdiv);
// Search the complete DOM for the new element and try to select it (but abc is null)
var abc = document.querySelector('.newdiv');
abc.style.color = 'blue';
<div id="existingdiv"></div>
I'm trying to make a Javascript code that if you click on of the "cards" then a div will display above it.
Here is my current code but I can't figure out how to make it display more than just text. I would like to be able to display images or create shapes inside, etc.
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].addEventListener('click', function () {
var newdiv = document.createElement('div');
newdiv.innerHTML = 'Hello';
document.body.appendChild(newdiv);
});
}
Here is my full code:
http://pastebin.com/ueqiywFu
I know my full code is not organized, many of my friends have told me. I am planning on organizing it after it is complete. Anyway please help me..
Try appending elements to it:
var newdiv = document.createElement('div');
newdiv.innerHTML = 'first div text';
var otherdiv = document.createElement('div');
otherdiv.innerHTML = 'second div text';
newdiv.appendChild(otherdiv);
document.body.appendChild(newdiv);
DEMO
PS:
As Terry says, this is Javascript, not JQuery. This is JQuery.
I want to make dynamic division on button click on my web page please tell me easiest solution, I am new to JavaScript.
Hope this will help
function divcreate() {
var div = document.createElement("div");
div.setAttribute("id", "mydiv");
div.className = "mdiv";
div.style.display = "none";
document.body.appendChild(div);
}
To create an element, use the createElement method
var mydiv = document.createElement('div');
//mydiv is a variable containing a newly created div
<button onclick="createDiv()">Click Me</button>
function createDiv(){
var newDiv = document.createElement('div');
}
//create a div like below
var div=document.createElement("div");
var node=document.createTextNode("This is new.");
div.appendChild(node);
Then append the above div to which you want it to be child
var element=document.getElementById("some_parent_tag");
element.appendChild(div);
So... I want to add the following right before the /body of a document, I can't seem to find a way to make it work:
document.body.innerHTML+="<div style=\"position:absolute; right:-10px; bottom:10px;\">response</div>\"");
Especially with the <body> element, you shouldn't be using innerHTML to append elements to an element. An easier way is with DOM methods like createElement, insertBefore or appendChild.
https://developer.mozilla.org/en-US/docs/DOM/document.createElement
https://developer.mozilla.org/en-US/docs/DOM/Node.insertBefore
https://developer.mozilla.org/en-US/docs/DOM/Node.appendChild
Try this:
var div = document.createElement("div");
div.style.position = "absolute";
div.style.right = "-10px";
div.style.bottom = "10px";
div.innerHTML = "response";
var lastChild = document.body.lastChild;
document.body.insertBefore(div, lastChild.nextSibling);
Although I guess it would make sense to just append it to the body:
document.body.appendChild(div);
(instead of the last two lines in my first example)
It also depends on when you're calling this code. Of course it will work if executed in the middle of the <body>, but you probably want to wait until the body (DOM) is ready so that the element is actually appended at the real end of the body. By using something like:
window.onload = function () {
// Your code from above
};
This will make sure the original <body> contents are ready.
Don't add stuff like that! Instead, do this:
var newDiv = document.createElement('div')
newDiv.style.position = 'absolute'
newDiv.id = 'myDiv'
newDiv.innerHTML = 'hello'
//etc.
document.body.appendChild(newDiv)
Change code to
document.body.innerHTML="<div style=\"position:absolute; right:-10px; bottom:10px;\">response</div>\"";
Remove ) at the end
What about:
var div = document.createElement("div");
// it's better use a CSS here instead
div.style.position = "absolute";
div.style.right = "-10px";
div.style.bottom = "10px";
div.innerHTML = "response";
document.body.appendChild(div);
?
I am trying to add some <p> elements to a div using Javascript. The function loops to create a predetermined amount of these divs. My id for the div is created every time the function runs, and is just 'div' plus a number (e.g.: div1, div2, div3, etc.)
Here is my code:
var divNum = 'div';
function myFunction () {
var divTag = document.createElement("div");
divTag.id = "div";
divTag.className ="info";
document.body.appendChild(divTag);
var idXX = divNum;
$('#div').attr('id',idXX);
var text = document.createElement("p");
text.id = "1";
text.className ="text1-2";
text.innerHTML = "A";
*"PROBLEM HERE"*.appendChild(text);
divNum = divNum + 1;
}
My question is, can you do something to where it says *"PROBLEM HERE"* that makes it append a div with id equal to my var idXX?
Just use divTag.
That line would look like this:
divTag.appendChild(text);
I may be misunderstanding the question, but it seems to me that the "PROBLEM HERE" line should just be this:
$('#'+idXX).append(text); // literally doing what you asked
Or simply this:
divTag.appendChild(text); // better approach since it doesn't have to go look for it.
Also, why do you create the div and then change its ID? Also, divNum is initialized as "div", not 0 like is presumably intended...
If you want to use jQuery and not mix it with base javascript:
var divNum = 'div';
function myFunction () {
var divTag = $("<div>").
.attr("id", divNum)
.addClass("info");
.appendTo($("body"));
$("<p>")
.attr("id", "1")
.addClass("test1-2")
.html("A")
.appendTo(divTag);
divNum = divNum + 1;
}
Looks like your using jQuery to set the attribute id.
$('#div').attr('id',idXX);
You should be able to do everything in jQuery
var divNum = 0;
function myFunction() {
var _p = $('<p>').text('A').addClass('text-1-2')
$('<div>').attr({'id':'div'.concat(++divNum)}).addClass('info').html(_p).appendTo('body');
}