js - appendChild Method spoiling the whole page - javascript

I am making a simple web app. In one part of it, I have a dynamically generated list:
which is achieved with:
for(var i=0; i<goalsObj.length; i++){
var node = document.createElement("li");
node.setAttribute("class", "list");
node.setAttribute('id','g'+i);
var checkbox = document.createElement("input");
checkbox.setAttribute("type","checkbox");
checkbox.setAttribute("class", "tickbox");
node.appendChild(checkbox);
var textnode = document.createTextNode(goalsObj[i]);
node.appendChild(textnode);
document.getElementById("sortable").appendChild(node);
}
And I have a jQuery function executed when any item on the list is clicked, to app a Calendar below it.
which is achieved with:
var cal = document.createElement("p");
cal.innerHTML=calendar_html;
document.getElementById($(this).attr('id')).appendChild(cal);
Anyhow, I am getting a very shabby output:
What's wrong? What should I do? How do I make the pre-existing elements(all made dynamically) to make way for the newly created ones?

Generate the whole content at once and not in parts. Hide the content that you do not want on initialization of the page. Write a function to show the hidden content when the list items are clicked.

Paragraph ("p" element) is for organization of information into paragraphs.
http://www.w3.org/TR/html401/struct/text.html#h-9.3
I suppose you should try to use div instead of p
var cal = document.createElement("div");
cal.innerHTML=calendar_html;

Related

How can I add new radio buttons without unchecking old ones? [duplicate]

I have a drop down which builds a form based of the selections that are selected. So, if someone selects 'foobar', it displays a text field, if they choose 'cheese', it displays radio buttons. The user can then enter data into these forms as they go along. The only problem is that when they add a new form element, all the rest of the information is erased. Im currently using the following to do add to the form:
document.getElementById('theform_div').innerHTML =
document.getElementById('theform_div').innerHTML + 'this is the new stuff';
How can I get it to keep whatever has be enetered in the form and also add the new field to the end?
Setting innerHTML destroys the contents of the element and rebuilds it from the HTML.
You need to build a separate DOM tree and add it by calling appendChild.
For example:
var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);
This is much easier to do using jQuery.
Step One:
Add jQuery to your headers:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
Step Two:
Append, don't replace, data to your DIV like this:
$("#theform_div").append("your_new_html_goes_here");
Don't use innerHTML to create the form elements. With innerHTML you're overwriting the old HTML with new HTML which will recreate all the elements. Instead you need to use the DOM to create and append the elements.
EXAMPLE
function addRadioElement()
{
var frm = document.getElementById("form_container");
var newEl = document.createElement("input");
newEl.type = "radio";
newEl.name = "foo";
newEl.value = "bar";
frm.appendChild(newEl);
}
The most correct way to do it without using a framework (like jQuery, Dojo, YUI) is:
var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);
document.getElementById('theform_div').appendChild(div);
innerHTML, although supported by most browsers, is not standard compliant and - therefore, not guaranteed to work.
I would suggest using jQuery and its append function.

Swap the constant of td using jquery

I want to swap the content of two td's with each other by clicking on move up button.
I mean I want to swap content between the 2nd td and 3rd td.
I got that done but I am facing little problem in that i.e. "the swapped td's are not toggling the class that shows the current td is clicked or not after the swapping."
I am using this code for swapping the content of td's as below
var currentTr = $("#selectedTab td.backgroundcolor").parent();
var previousTr = currentTr.prev();
var temp = currentTr.html();
$(currentTr).html(previousTr.html());
$(previousTr).html(temp);
HTML manipulation in the DOM can be destructive. You should instead move the DOM nodes themselves.
var currentTr = $("#selectedTab td.backgroundcolor").parent();
var previousTr = currentTr.prev();
var temp = currentTr.contents().detach();
currentTr.append(previousTr.contents());
previousTr.append(temp);
This way you're not serializing, destroying and rebuilding all the nodes. You're just moving them.

How can I dynamically create a div, while referencing it to a class?

Searched far and wide here, but can't seem to find the answer!
This is homework! So I do not expect anyone to write anything for me, just to help me :)
I am attempting to have a HTML message box with a post button. When the post button is clicked, the message, along with the date is posted into a div bellow. This can be done many times, with the newest ones being published under the oldest ones. The way I am trying, is to create a new div every time, and assign them all to the same class that is in my CSS document. The message and date must be in separate 'p' tags with their own class assigned. If anyone knows a better approach, I'm all ears. Although, my Javascript document must be external.
I currently have this code:
function createComment(){
var message = "";
var divTag = document.createElement("div");
divTag.className = "commentDiv";
divTag.innerHTML = Date();
message=document.getElementById("textBox").value;
document.getElementById("comments").innerHTML=message;
}
I am attempting to create the div, then give it an ID of 'commentDiv', since that is the div ID in my CSS document that is already styled. I then post the date in the inner HTML, and save the value from the text box into a variable, named 'message'. I then try to attempt to print the message into a paragraph tag with the ID of 'comments'. I am VERY new to web Javascript. So honestly, I don't really know what I'm doing haha.
All help is greatly appreciated. Thanks!
I think what you are looking for is something like
var ct = document.getElementById('comments')
function create(){
var divTag = document.createElement('div');
divTag.className = 'comment';
var p1 = document.createElement('p');
p1.className = 'date';
p1.innerHTML = new Date();
divTag.appendChild(p1)
var p2 = document.createElement('p');
p2.className = 'message';
p2.innerHTML = 'nop';
divTag.appendChild(p2);
ct.appendChild(divTag);
}
Demo: Fiddle.
The appendChild() can be used to append child element to a node.

How to display a description text image for 3 seconds in Dom?

Hi I'm working on a site. I need help making a text appear in a div where it saids any image clicked their title and size. in DOM scripting. Can anyone help? No innerhtml.
Thanks
using pure dom scripting and no helper framework like jquery, gotta dust off some things I haven't used in awhile!
That said here ya go. Must be placed after page has loaded. (Or remove the last "showCredit();" line and put it in your body onload.
Note you'll need to alter this, I just put the "source" in the text, other attributes and styling is up to you.
function showCredit(){
//find all image tags we want
var elements = document.getElementsByTagName('img')
//iterate through them
for(var i=0; i<elements.length;i++){
//bind the onclick function to all image tags
elements[i].onclick=function(){
//create the new div
var el = document.createElement('div')
//alter this to be whatever text you want
var text = document.createTextNode('Source = '+this.getAttribute('src'));
//alter this if you're going to have more than one clickable div
el.id = 'test';
//add the text to the div
el.appendChild(text);
//add the new div after the image tag
this.parentNode.insertBefore(el, this.nextSibling);
//set a timer to find the element we've named "test" and remove it
window.setTimeout(function(){
var element = document.getElementById('test');
if(element){
element.parentNode.removeChild(element);
}
}, 4000);
}
}
}
//execute the function (bind all images)
showCredit();

Add to HTML form without losing current form input information in Javascript

I have a drop down which builds a form based of the selections that are selected. So, if someone selects 'foobar', it displays a text field, if they choose 'cheese', it displays radio buttons. The user can then enter data into these forms as they go along. The only problem is that when they add a new form element, all the rest of the information is erased. Im currently using the following to do add to the form:
document.getElementById('theform_div').innerHTML =
document.getElementById('theform_div').innerHTML + 'this is the new stuff';
How can I get it to keep whatever has be enetered in the form and also add the new field to the end?
Setting innerHTML destroys the contents of the element and rebuilds it from the HTML.
You need to build a separate DOM tree and add it by calling appendChild.
For example:
var container = document.createElement("div");
container.innerHTML = "...";
document.getElementById("theform_div").appendChild(container);
This is much easier to do using jQuery.
Step One:
Add jQuery to your headers:
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
Step Two:
Append, don't replace, data to your DIV like this:
$("#theform_div").append("your_new_html_goes_here");
Don't use innerHTML to create the form elements. With innerHTML you're overwriting the old HTML with new HTML which will recreate all the elements. Instead you need to use the DOM to create and append the elements.
EXAMPLE
function addRadioElement()
{
var frm = document.getElementById("form_container");
var newEl = document.createElement("input");
newEl.type = "radio";
newEl.name = "foo";
newEl.value = "bar";
frm.appendChild(newEl);
}
The most correct way to do it without using a framework (like jQuery, Dojo, YUI) is:
var text = document.createTextNode('The text you want to write');
var div = document.createElement('div');
div.appendChild(text);
document.getElementById('theform_div').appendChild(div);
innerHTML, although supported by most browsers, is not standard compliant and - therefore, not guaranteed to work.
I would suggest using jQuery and its append function.

Categories