Develop Reference

JS DOM createElements and appendChild not working

I am trying to create a website with information of some students. Hence I need to create dynamic profile cards and append them to body. But DOM always gets me.
function student(src, name) {
this.src = src;
this.name = name;
}
var student1 = student(1, "ABC");
var card = document.createElement('div');
card.className = 'card';
var image = document.createElement('img');
image.src = 'images\/students\/' + student1.src + '.jpg';
card.appendChild(image);
var stuName = document.createElement('p');
stuName.className = 'name';
var stuNameText = document.createTextNode(student1.name);
stuName.appendChild(stuNameText);
card.appendChild(stuName);
However nothing is showing up on the screen. placeHere is the id of body. Any help will be appreciated.
Edit:
Apparently applying all necessary changes and moving my script tag to body helps.

the way you creating Student1 Object is wrong
var student1 = new student(1, "ABC");
you forget new keywork
function student(src, name) {
this.src = src;
this.name = name;
}
var student1 = new student(1, "ABC");
var card = document.createElement('div');
card.className = 'card';
var image = document.createElement('img');
image.src = 'images\/students\/' + student1.src + '.jpg';
card.appendChild(image);
var stuName = document.createElement('p');
stuName.className = 'name';
var stuNameText = document.createTextNode(student1.name);
stuName.appendChild(stuNameText);
card.appendChild(stuName);
var main=document.getElementById('main')
main.appendChild(card)
.card{ color: palevioletred;
background: yellow;}
<div id="main"></div>

You have to append all these newly created elements to a div already in the DOM or body tag will work too. Currently, the elements you created are not attached to DOM. So lets say you have a div
<div id="mydiv"></div>
you can append to that div you newly created elements like this:
ley mydiv = document.getElementById('mydiv');
mydiv.appendChild(card);
or you can append it to the body itself like so:
ley body= document.getElementByTagName('body');
body.appendChild(card);

You didn't append your code to any DOM element, create new div in body and append your code into that div.
<div id="stdCard"></div>
and then you can use innerHTML to append card into parent div created. document.getElementById("stdCard").innerHTML = card;

How to pass a variable in document.getElementById. As well as getting undefined when calling a value in an array

<iframe id="frmFile" src="Book1.txt" onload="generateInventory();" style="display: none;"></iframe>
<script>
function csvpls() {
var oFrame = document.getElementById("frmFile");
var strRawContents = oFrame.contentWindow.document.body.childNodes[0].innerHTML;
while (strRawContents.indexOf("\r") >= 0)
strRawContents = strRawContents.replace("\r", "");
var arrLines = strRawContents.split(",");
return arrLines
}
function generateInventory(a, b) {
var xx = csvpls()
var div = document.createElement("div");
div.style.width = "1000px";
div.style.height = "100px";
div.style.background = "red";
div.style.color = "white";
div.innerHTML = "Hello " + xx[a] + " yes!";
document.getElementById(b).appendChild(div);
}
</script>
<div id="Q1"></div>
<script>
generateInventory(20, Q1);</script>
</body>
I am trying to create edit multiple divs with the following code. I hope to call each function with parameters to create the divs and put content in them.
So I have some problems with the code above. First off, document.getElementById(str).appendChild(div); is not working the way I want it to. It works if I put the div id "Q1" instead of b. Just wondering, if I can pass a variable through it. Secondly, when I change the div to "Q1", the div is generated, but the content in there is "Hello undefined Yes". If I call the array with xx[20] instead of xx[a], I would get what I want which is "Hello content yes". Sorry, this probably seems like a nuisance, any help is appreciated.

Unable to edit textarea with JavaScript

I want to edit my textarea manually after updating it with JavaScript, but when I write some text on it, the text I write is positioned over the text which is already in the textarea (written by JS).
So I'm searching of why can't I do it. Here is my code:
function initTextIA() {
var txt = document.createElement('textarea');
txt.style.rows = "5";
txt.style.cols = "45";
txt.style.top = "2300px";
txt.style.left = "250px";
txt.style.position = "absolute";
txt.style.background = "none";
txt.style.color = "green";
txt.id = "txtIA";
document.getElementById("cool").appendChild(txt);
}
initTextIA();
var doc = document.getElementById("txtIA")
doc.value += "txtxtxtxt.\n";
<div id="cool"></div>
The resulting HTML code of the textarea is :
<textarea id="txtIA" style="top: 2300px; left: 250px; position: absolute; background: none; color: green;"></textarea>

From comments it sounds to me like your line-height property is not properly set for textarea. Since you set textarea value with line break on the end:
txtxtxtxt.\n
newly written text should go in second row but it overlaps old text entered with JS. So try the following inside your initTextIA function:
txt.style.lineHeight = "2";

Since there is little original HTML provided in question so there are a lot of assumptions here. What I feel from all the discussion in comments is you are not able to append text then type in a value then continue appending it via some button.
I have written a simple case where I have commented out the positioning of textarea so testing can be done with ease. I have added two buttons but no error checks just to give a direction. Please let me know if this does not resolve the issue.
function initTextIA() {
var txt = document.createElement('textarea');
txt.style.rows = "5";
txt.style.cols = "45";
//txt.style.top = "2300px";
//txt.style.left = "250px";
//txt.style.position = "absolute";
txt.style.background = "none";
txt.style.color = "green";
txt.id = "txtIA";
document.getElementById("cool").appendChild(txt);
document.getElementById('addButton').style = 'display:none';
document.getElementById('appendButton').style = 'display:block';
}
function fillTextIA() {
var doc = document.getElementById("txtIA")
doc.value += "txtxtxtxt.\n";
}
<div>
<button id='addButton' onclick='initTextIA()'>add text area</button>
<button id='appendButton' onclick='fillTextIA()' style='display:none'>append text</button>
</div>
<div id='cool'>
<p>An element.</p>
</div>

Javascript element.style.backgroundImage not loading image

Not sure what I'm missing here...
window.onload = function() {
var testDiv = document.createElement("div");
testDiv.style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png')";
document.body.appendChild(testDiv);
}

The issue is you're setting a background-image on a div with no height or width. Add those:
window.onload = function() {
var testDiv = document.createElement("div");
testDiv.style.backgroundImage = "url('http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png')";
testDiv.style.backgroundSize="cover"; //image is large, you dont need this if you dont want
testDiv.style.height="100px"; //add some value
testDiv.style.width="100px"; //add some value
document.body.appendChild(testDiv);
}
FIDDLE

Javascript Create Clickable Text

EDIT 2 - I decided to create a simple example with jsfiddle.
http://jsfiddle.net/VqA9g/61/
As you can see, I am trying to reference the new div.
EDIT - d/t negative votes and unclear question
I have a linked-list like so:
var struct_list = function () {
this.id = 0;
this.name = 0;
this._head = null;
};
struct_list.prototype = {
// .. adding code , delete code ...
list_contents: function () {
var current = this._head;
while ( current != null ) {
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "white";
div.style.color = "black";
div.style.top = "0px";
div.style.left = "0px";
div.style.margin = "400px 1000px auto";
div.style.cursor = "pointer";
div.innerHTML = current.name;
div.onclick = function ( v ) { var d = document.getElementById('div'); alert(d)};
document.body.appendChild(div);
current = current.next;
}
return null;
},};
I want to be able to display this linked list, and each item displayed be able to interact with an "onclick".
Example:
struct_list.add ( 0 , "Zero" );
struct_list.add ( 1 , "One" );
struct_list.list_contents();
_________________________________________________________________________
| |
| <clickable> "Zero" that does a function(id) that passes over its ID(0) |
|________________________________________________________________________|
| |
| <clickable> "One" <same as above> |
|________________________________________________________________________|
Sorry if I was unclear. Will reedit if still unclear. My apologies.
I have a linked-list struct that I hold data in (it changes data frequently) and I have a setInterval to refresh it. My question is how can I list the struct's contents while still being able to click the exposed content, I have it set up right now that each content in the linked-list contains an id. Also , how can I make sure that overflow is automatic for the y axis? I am guessing I have to place it into a div that has that enabled.
But my real question is how to expose the linked-lists elements while also being able to interact with them via an onclick.
I also do not want to use anything other than pure javascript.
Example (in my mind) would maybe be something like:
<div id="PopUp">
<script>
setInterval(function() {
if ( struct_qued_list ) {
struct_qued_list = false;
main.struct_list.list_contents(); // the linked list
}
}, 100);
</script>
</div>
list_contents: function () {
var current = this._head;
while ( current != null ) {
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "100px";
div.style.background = "white";
div.style.color = "black";
div.style.top = "0px";
div.style.left = "0px";
div.style.margin = "400px 1000px auto";
div.style.cursor = "pointer";
div.innerHTML = current.name;
div.onclick = function ( v ) { var d = document.getElementById('div'); alert(d)};
document.body.appendChild(div);
current = current.next;
}
return null;
},
Any help or logical way to do this would be appreciated.

This is mainly a scope problem, in your Edit 2 fiddle, the alert gives undefined because your i got the value 2 in order to leave the loop.
Here is a possible solution : Live demo (jsfiddle)
!function(){
var index = i; // Make it independant of i
div.onclick = function () { alert(list[index]); };
}();
You could also use attributes to store any value, and using this in the function to retrieve it.
Or export the whole process to another function to obtain something like this :
for ( var i = 0; i < 2 ; i++ ) {
doSomething(i);
}

When you add new content to the DOM JavaScript sometimes has a hard time picking that up. You may need to use a DOM mutation event (like DOMNodeInserted) to add the event listeners to your text nodes.
document.addEventListener('DOMNodeInserted', function(){
document.getElementById('thing').addEventListener('click', function(){
alert('yey!');
});
});
you may need to name your functions so you can remove them as well, if nodes are going to be inserted without removing all the old ones. Yes this is pure javascript.
EDIT: for your overflow issue, you could assign a class to each node as you insert it and style the class via CSS
.classname {
overflow: auto;
}