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.
Related
Working in Javascript. I'm trying to duplicate a div and name it dynamically in a fo. Neither of the following appear to work:
var origDiv = document.getElementById("outerSquare");
for (i=1; i<=4; ++i){
newDiv = document.body.appendChild(origDiv.cloneNode(true));
// newDiv.id = "block"+i;
newDiv.setAttribute("id", "block"+i);
}
Here's the Fiddle:
http://jsfiddle.net/dmperkins74/5r01zyma/
Funny thing is, it appears to be only duplicating the div inside my "outerSquare". If I remove the attempt to reset the ID, it all fails. Any insights would be appreciated.
Thanks,
Dan P.
Use classes:
<div class="outerSquare">
<div class="innerSquare"></div>
</div>
var origDiv = document.getElementsByClassName("outerSquare")[0];
for (i=1; i<=4; ++i){
newDiv = document.body.appendChild(origDiv.cloneNode(true));
newDiv.style.left = i*40 +"px";
newDiv.style.top = i*40 +"px";
// newDiv.id = "block"+i;
//newDiv.setAttribute("id", "block"+i);
}
origDiv.style.left = "200px";
block2.style.left = "400px";
http://jsfiddle.net/5r01zyma/3/ No id duplication, no styling problems.
By changing ID, you can't apply old css styles. That was problem. P.S. Now you can add id's if you need it.
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
I'm trying to use the draggable and resizable jQuery function, but I may have to change a little bit of this code to jQuery.
I have this HTML code:
<div id="resizable2" class="ui-widget-content">
<h3 class="ui-widget-header">MS</h3>
</div>
This works great with the jQuery:
$(function() {
$( "#resizable" ).draggable();
$( "#resizable" ).resizable();
}
But then, I've tried to use it with a div created by javascript:
function addnewbox() {
var newDiv = document.createElement("div");
var h = document.createElement("h3");
var text = document.createTextNode("MS");
document.body.appendChild(newDiv);
newDiv.appendChild(h);
newDiv.className = "ui-widget-content";
h.appendChild(text);
h.className = "ui-widget-header";
newDiv.id = "resizable";
}
And it's not working
Change your dom object to a jQuery object by calling $(newdiv) and re-initialise the resizable and draggable functionality on the new content.
function addnewbox() {
var newDiv = document.createElement("div");
var h = document.createElement("h3");
var text = document.createTextNode("MS");
newDiv.appendChild(h);
newDiv.className = "ui-widget-content";
h.appendChild(text);
h.className = "ui-widget-header";
newDiv.id = "resizable";
$(newDiv).resizable(); //Add this
$(newDiv).draggable(); //and this
document.body.appendChild(newDiv); //Append to the dom once you've finished with it.
}
As devqon has mentioned, the reason for this is that this function adds dynamic content (content which isn't there on page load) this means that the draggable and resizable functionality is not present on this new content. This is why you need to re-initialise the connection between the new element and the functionality.
Also as menioned don't re-use ID's, they must be unique. It is bad practice to use the same id for multiple elements and will very likely lead to other issues.
Lastly, it is a good idea when creating new content to manipulate it first and add it to the page at the end. In this instance you are appending further content inside the newly created div. I would do this first and then when finished with it, add it to the page.
Hi I have changed your function to:
function addnewbox() {
var newDiv = document.createElement("div");
var h = document.createElement("h3");
var text = document.createTextNode("MS");
newDiv.id = "resizable";
newDiv.className = "ui-widget-content";
h.className = "ui-widget-header";
h.appendChild(text);
newDiv.appendChild(h);
document.body.appendChild(newDiv);
}
And I have created a jsfiddle for you to try yourself:
http://jsfiddle.net/ttw7218z/4/
Well you need to initialize resiazble plugin on new DOM elements. You already have a few JS solutions so I will post one more version using jQuery for elements creation:
function addnewbox() {
$('<div class="ui-widget-content resizable">' +
'<h3 class="ui-widget-header">MS</h3>' +
'</div>').appendTo('body').resizable();
}
One more thin you should be aware of: you should not duplicate ids, they must be unique. So instead of multiple #resizable use .resizable classes.
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);
I'm new to the concept of document fragments and I am currently having some trouble figuring out how to append children to a fragment.
This is my html
<form>
<ul id="tweets">
<li><img src="tweetIcon.jpg"><span>This is my tweet</span></li>
</ul>
</form>
Below is my script:
var tweets = [
"When teaching math, it shouldn't just be: 'Answer this question:'. It should also be: 'Question this answer:'",
"Another reason to choose ",
" Excellent! I love the new APIs that came with it, as well as the new tags and attributes.",
"That's great. I am really grateful for your program and will definitely continue to encourage folks to enroll in courses!"
];
function init() {
var ul = document.getElementById("tweets");
var fragment = document.createDocumentFragment();
for (var i = 0; i < tweets.length; i++) {
var tweet = tweets[i];
var li = document.createElement("li");
var span = document.createElement("span");
span.innerHTML = tweet;
var img = document.createElement("img");
img.setAttribute("src", "tweetIcon.jpg");
li.appendChild(span);
ul.appendChild(li);
fragment.appendChild(img);
fragment.appendChild(li);
}
ul.appendChild(fragment);
}
Right now I see the img and the span element only once at the top of the list. Below are all the strings for the tweets correctly displayed as a list. I need to add the image and the span element to each tweet. The three lines that are commented out are where I attempted to add the image to each li element as a child, but those lines don't really do anything. Any suggestions? thanks!
Move the document.createElement("img") inside the loop, otherwise you're repeatedly moving and changing the same image object.