var udiv = document.createElement('div');
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello";
div.appendChild(udiv);
I've been trying to get this to work, but when I open the page there's nothing there. I know the Javascript file works because everything else shows up, but the div doesn't. There's no error.
But both are new elements, Append those elements to an already existing element or to the body,
.
.
.
div.appendChild(udiv);
document.body.appendChild(div)
You've appended udiv to div, but you've never appended div to the DOM.
You didn't append the div object to the DOM
document.body.appendChild(div);
Related
I'm trying to add a div dynamically using an link and some javascript. I've set up a jsfiddle http://jsfiddle.net/W4Sup/1654/.
Here's the html
Add Div
Here's the css
div {
border: 1px dotted red;
padding: 10px;
}
And here is the javascript:
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);
iDiv.innerHTML = "I'm the first div";
// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';
// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);
innerDiv.innerHTML = "I'm the inner div";
function addDiv() {
var newDiv = document.createElement('div');
newDiv.className = 'block-3';
iDiv.appendChild(newDiv);
newDiv.innerHTML = "Another inner div";
}
Can someone explain what I've got wrong please
check this updated fiddle, basically addDiv was not visible to the click event handler since it was not in a global scope (since it is inside domready event handler)
<script>
var addDiv;
</script>
addDiv = function addDiv() {
var newDiv = document.createElement('div');
newDiv.className = 'block-3';
iDiv.appendChild(newDiv);
newDiv.innerHTML = "Another inner div";
return false;
}
Well first of all you dont need the href, only the onclick will matter, thus making it usable on any html tag, not only <a>'s
Add Div
the onclick doesnt take a ; at the end of your function, it's an assignation, you'not calling it
I prefer the assign-in-the-JS approach. Set your event listener in your JS by grabbing that link and putting addDiv in its click event handler.
Demo using your code
Basic changes -
JS:
document.getElementById("joe").addEventListener("click", addDiv, false);
...
function addDiv( event ) {
event.preventDefault();
...
}
HTML:
Add Div
You don't have to use an ID, it was just the most convenient way in this example. I recommend it though if that's an option for you.
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 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 dynamically wrap the contents of a document's body tag in a DIV. So far, I have used the following code:
document.body.innerHTML = '<div id="wrap">' + document.body.innerHTML + '</div>';
This works, but has the unwanted side effect that other scripts on the same page stop working (I assume because changing innerHTML renders any object references they may have held useless).
What would be the best/most efficient way to achieve this and keep the references intact, using pure JavaScript, or the Prototype framework?
You would do something like:
var div = document.createElement("div");
div.id = "wrap";
// Move the body's children into this wrapper
while (document.body.firstChild)
{
div.appendChild(document.body.firstChild);
}
// Append the wrapper to the body
document.body.appendChild(div);
you could try this? (untested)
var newDiv = document.createElement('div')
newDiv.setAttribute('id','wrap');
var bodyChildren = document.body.childNodes;
for(var i=0;i<bodyChildren.length;i++){
newDiv.append(bodyChildren[i]);
}
document.body.appendChild(newDiv);
Not sure about prototype, but in jQuery you can do this
$('body').wrap('<div id="wrap"></div>');
Maybe something like this:
var body = document.body;
var div = document.createElement('div');
div.className = 'wrapper';
div.innerHTML = body.innerHTML;
body.innerHTML = div.outerHTML;
$('#iframe').contents().find('body').wrap('<div class=body></div>');
$('#iframe').contents().find('body').replaceWith(function() {return this.innerHTML});
$('#iframe').contents().find('.body').wrap('<body></body>');
this lines are going to wrap a div inside body element tag. First, it will wrap the body tag, then remove the body tag and append its all contents to the body div and the 3rd line will wrap this div again with the body tag.