How can I create <div horizontal layout></div> element dynamically using javascript?
i can create div element with document.createElement("div"); but how do I add horizontal layout to it?
<html>
<head>
<script type="text/javascript">
window.onload = function() {
newdiv = document.createElement("div");
newdiv.setAttribute('horizontal', '');
newdiv.setAttribute('layout', '');
document.body.appendChild(newdiv);
// You can insertBefore() too.
// Or... document.body.innerHTML = document.body.innerHTML + '<div horizontal layout></div>';
}
</script>
</head>
<body>
</body>
</html>
Some helpful links:
http://www.w3schools.com/jsref/met_document_createelement.asp
Adding elements to the DOM
Searching elements in DOM
How to add or update an attribute to an HTML element using JavaScript?
And so on.
Related
I have a DOM element, which inside it has a node with the tag "frame".
But when I do innerHTML, the "frame" tag disappears. Why?
Example:
I have this string:
<div><p>Text</p><frame></frame></div>
If I want to put this string as the HTML of an element, the "frame" tag disappears:
var div = document.createElement('div');
div.innerHTML = str.trim();
Result:
<div><p>Text</p></div>
How can I resolve this?
You can't use <frame> inside <body> tag.
For that, write <frameset> instead of <body> and use <frame> inside <frameset></frameset>.
And, in the <body> tag( or DOM), you can use <iframe>.
Try this
var container = document.createElement('div');
var div = document.createElement('div');
var p=document.createElement('p');
p.innerHTML="Text";
var frame=document.createElement('frame');
div.appendChild(p);
div.appendChild(frame);
container.appendChild(div);
alert(container.innerHTML);
document.getElementById("mainContainer").appendChild(container);
alert(document.getElementById("mainContainer").innerHTML);
<div id="mainContainer"></div>
I am new to jQuery and I am practicing appending div elements. Here is my code:
<!doctype html>
<html lang="en">
<head>
<title>Div Id</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<script>
document.body.onload = addElement;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("This is a first division");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
</script>
<body>
<div id="div1">This is a second division.</div>
</body>
</html>
Output would be:
This is a second division.
But as per my implementation the output should be
This is a first division
This is a second division.
I am not able to figure where it is going wrong. Please someone help me out with this.
Thanks in advance.
onload is a property of the window object, not the document.body object.
This works:
window.onload = addElement;
actually it works.... try to move your javascript in the head of you html file
document.body.onload = addElement;
function addElement () {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("This is a first division");
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
<div id="div1">This is a second division.</div>
$('#div1').before('<div id=div0>This is a first division</div>')
demo
If you want Jquery it is as simple as this.
If you want to use jQuery you can check this fiddle:
$('body').prepend('<div>This is a first division</div>');
i am working on this example of appendChild() method.but the difference is here i am trying to add more text to a div dynamically.that was all right.but the hard part is the text i want to add will be red in color.how can i do that?
i tried
text.setAttributes('color',"red");
But it didn't work.so,how this task can be done??please help,thanks!!!!
the full code is given below............
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function create_text(){
var mydiv = document.getElementById("mydiv");
var text = document.createTextNode(" New text to add.");
mydiv.appendChild(text);
}
</script>
</head>
<body>
<button onclick="create_text();">Create Text Node</button>
<div id="mydiv">Welcome, here is some text.</div>
</body>
</html>
You would normally have to use CSS properties, however, text nodes cannot have CSS properties applied to them. You therefore need another container element:
You can choose any container element you wish, e.g. div, span, etc. It just needs to be capable of containing a text node. Having an element then allows us to access the styles property and set various styles (the color attribute in your case).
→ jsFiddle
function create_text(){
var mydiv = document.getElementById("mydiv");
var container = document.createElement("span");
var text = document.createTextNode(" New text to add.");
container.appendChild(text);
container.style.color = "red";
mydiv.appendChild(container);
}
Further note:
the order of the color assignments and calls of appendChild is arbitrary. The following would also be possible:
function create_text(){
var mydiv = document.getElementById("mydiv");
var container = document.createElement("span");
var text = document.createTextNode(" New text to add.");
container.appendChild(text);
mydiv.appendChild(container);
container.style.color = "red";
}
mydiv.style.color = 'red';
or just in css
#mydiv { color: red; }
if you have other elements inside the div that you don't want to be red, you'd need to wrap the new text in a span or div or another element before appending.
with jquery this would be super easy:
$('#mydiv').append('<span style="color:red">this is new text</span>');
If that's everything in your div, you could try
document.getElementById("mydiv").style.color="#ff0000";
When I use document.createElement javascript will add an element at bottom of body.
How can I add an element in certain place ? (with document.createElement property, I mean store in a new variable)
<html>
<head>
</head>
<script type="text/javascript">
var my_div = null;
var newDiv = null;
function addElement()
{
newDiv = document.createElement("div");
newContent = document.createTextNode("test");
newDiv.appendChild(newContent);
my_div = document.getElementById("org_div1");
document.body.insertBefore(newDiv, my_div);
}
</script>
<body onload="addElement()">
<div id='org_div1'> The text above has been created dynamically.</div>
</body>
</html>
When I use document.createElement javascript will add an element at
bottom of body.
No, an element is returned, but it is not attached to anything. You need to do that yourself:
var ptag = document.createElement('p');
ptag.innerHTML = "hello world";
var someplace = document.getElementById('some_element_id');
someplace.appendChild(ptag);
That's plain js; the jquery techniques are terser.
You can add dom/Element at the start or at the end of any DOM element using jquery.
See the below example
<!-- HTML CODE -->
<div id="item">
this is only test
</div>
JQUERY Script:
$(document).ready(function(){
var item = "<span>New item</span>"
/* PrependTo */
$(item).prependTo('#item');
/* AppendTo */
$(item).appendTo('#item');
});
see the jquery documentation here and here
Just add the element as a child of another one.
For instance:
HTML
<body>
<div id="container"></div>
...
[page content here]
...
</body>
JS
newdiv = $("<div>something</div>");
$("#container").append(newdiv);
See the documentation of append
uhm, I could be wrong, but if your using jQuery, are you looking for something like:
var newDiv = $("<div />");
Also if you have a jQuery list of elements (an object array) like $(".divs") which procs as [[Object Object], [Object Object]] (whereas each [Object Object] is a div element containing class .divs) you can add a new element to that list (without pasting to html body till ur rdy) by doing
$(".divs").add(newDiv);
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.