Develop Reference

Javascript - How to use variable when writing table

I'm trying to print the value of a variable in the first column of my table, but when I run the method, I get the name of the variable instead
I have the following code
function writeTable() {
var table;
var uInput = document.test.input.value;
table = "<table><tr><th colspan=3>Table Header</th></tr>";
table += "<tr><th>Column1</th><th>column2</th><th>column3</th></tr>";
table += '<tr><td>uInput</td><td>Value2</td><td>value3</td></tr>';
document.write(table);
}
<form name="test">
<input type="text" name="input">
</form>
<input type="submit" name="submit" value="Write Table" onclick="writeTable()">

You need to change this line:
table += '<tr><td>uInput</td><td>Value2</td><td>value3</td></tr>';
To use template literal:
table += `<tr><td>${uInput}</td><td>Value2</td><td>value3</td></tr>`;
Or standard concatenation
table += '<tr><td>' + uInput + '</td><td>Value2</td><td>value3</td></tr>';

You need to concatenate the string:
table+= '<tr><td>'+uInput+'</td><td>Value2</td><td>value3</td></tr>';
Remember that everything between single or double quotes is interpreted as a string. However your uInput is a variable. To make sure JavaScript get's the variable you need to concatenate. That means pasting the string parts and the variable together using the +. Purgatory's answer has a nice ecmascript 6 solution too.

In print statement, you have to concatenate variable with "+" sign. Your function 2nd last row looks like:
table+= '<tr><td>'+ uInput + '</td><td>Value2</td><td>value3</td></tr>';

use
table+= '<tr><td>' + uInput + '</td><td>Value2</td><td>value3</td></tr>';
to concatenate your string.As well as for the standards ,use
uInput = document.getElementsByName('input').value
in your javascript

JavaScript appendChild text node doesn't break line

a JavaScript n00b here...
I'm generating some html code in javascript, that is going to be displayed as code via the prism HTML markup plugin. The code is dynamically added to a <pre> tag on a button click.
My javascript code is as below. It is the text in line 2, where I need a line break. I have tried /n but that doesn't work it just makes a space.
var startLabelTag = document.createTextNode("text goes here");
startLabelTag.nodeValue = "<label><strong>" + elementNameFinal + "</strong></label>LINEBREAK HERE<select id='dropdownmenu' class='Custom_" + fieldNameFinal + "' onchange='selectChanged('#field[" + fieldNameFinal + "]',this.value);'>";
document.getElementById("dropdown-code").appendChild(startLabelTag);
Below is the text string I'm trying to create, where a line break is made where the text LINEBREAK HERE is.
<label><strong>" + elementNameFinal + "</strong></label>LINEBREAK HERE<select id='dropdownmenu' class='Custom_" + fieldNameFinal + "' onchange='selectChanged('#field[" + fieldNameFinal + "]',this.value);'>

Is it something like this you are looking for?
By using String.fromCharCode(10) you can insert a line break and with the pre tag (or div having white-space: pre-wrap) the line break will be visible/shown.
var elementNameFinal = "elementname", fieldNameFinal = "fieldname";
var startLabelTag = document.createTextNode("text goes here");
startLabelTag.nodeValue = "<label><strong>" + elementNameFinal + "</strong></label>" + String.fromCharCode(10) + "<select id='dropdownmenu' class='Custom_" + fieldNameFinal + "' onchange='selectChanged('#field[" + fieldNameFinal + "]',this.value);'>";
document.getElementById("dropdown-code").appendChild(startLabelTag);
<pre id="dropdown-code"></pre>
Side note
You can of course use a div as well, having the CSS rule Niet the Dark Absol suggested.
<div id="dropdown-code"></div>
#dropdown-code {
white-space: pre-wrap;
}

Add white-space: pre-wrap to the container's CSS.
After all, if you type a newline in your HTML source, do you get a blank line in the result? Nope. Not without making whitespace significant through CSS.

Building string with javascript

I have the following Problem:
I'm trying to build a simple string like that:
for(var x in classicde) {
specificWines += "<li><a onClick='displayWine(" + "'GV'" + ")'>" + classicde[x] + "</a></li>";
}
Then I insert this string in the DOM structure with:
var list = document.getElementById("leftmenu-list");
list.innerHTML = specificWines;
The result is the following(something like that i have shortened it):
<ul id="leftmenu-list">
<li><a onclick="displayWine(" gv')'>Classic1</a></li>
</ul>
So there is a problem within the onclick event and i am not able to find the issue.

Your quotes are wrong around 'displayWine(" + "'GV'" + ")' it should be 'displayWine(" + "\"GV\"" + ")' so the single quotes contains double quotes and do not break the attribute on render. \ is used to escape the quote so it doesn't break the JS code.
for(var x in classicde) {
specificWines += "<li><a onClick='displayWine(" + "\"GV\"" + ")'>" + classicde[x] + "</a></li>";
}
Otherwise as you see you end up with the single quote breaking the attribute. If you pass a string inside a string you need to make sure you use different quotes.
This should now render as
<li><a onclick='displayWine("gv")'>Classic1</a></li>

Add a "new line" in innerHTML

I am trying to create a table with images in first cell and information about the pic in second cell.
I need to add different information in one cell, like that:
cellTwo.innerHTML = arr_title[element] + arr_tags[element];
Is it possible to add a "new line" there?
I mean like that:
cellTwo.innerHTML = arr_title[element] + "/n" + arr_tags[element];

The simplest way is by adding a line break as html
cellTwo.innerHTML = arr_title[element] + "<br />" + arr_tags[element];
If you want your newlines to be treated literally, you could use the <pre> tag
cellTwo.innerHTML =
"<pre>" + arr_title[element] + "\n" + arr_tags[element] + "</pre>";

To round out your understanding:
Since it is html (innerHTML) it renders html and you can use any html you wish, so in this case simply add an good old fashioned <br>:
var test = document.getElementById('someElementId');
test.innerHTML = "The answer <br>to life, the universe, and everything...<br> is 42.";
If it were a string, such as in an alert box or text box etc. then /n would be correct:
alert('Never /n Forget your towel.');
Happy Coding!
- $cr1ptN!nj#

No, <br /> does not work in asp .net but you can instead write it like so
cellTwo.innerHTML = arr_title[element] + arr_tags[element]; arr_title[element] + "/n" + arr_tags[element];
Edit - alternative wrapped in code tags
cellTwo.innerHTML = arr_title[element] + arr_tags[element];
cellTwo.innerHTML += arr_title[element] + "/n" + arr_tags[element];
Semicolon ";" seems to act as line breaks
Remember the "+=" to assign multiple values to the string

Single quote, double quote, plus sign in Javascript

I'm not good in JS. I tried to modify a jQuery plugin from these codes:
aTag += " style='"+innerStyle+"'";
aTag += arrow + '<span>text here</span>';
to these codes:
//aTag += " style='"+innerStyle+"'";
aTag += arrow + '<span style="'+innerStyle+'">text here</span>';
Basically I want to move the content of innerStyle from anchor tag to span tag. However, in Firebug I saw this mess after the move:
<span blue;"="" solid="" 1px="" border:="" 25px;="" text-indent:="" transparent;="" -80px="" 5px="" scroll="" no-repeat="" image.png")="" images="" web="" 127.0.0.1="" http:="" style="background: url(">text</span>
Why it works in anchor tag but not in span tag? What's the use of plus (+) signs?

+ does just what it looks like it does in this case (concatenate text). The issue here is that the HTML that is being generated in the first instance looks like this:
style='some contents with a " symbol'
while in the second case what is being generated is this:
style="some contents with a " symbol"
... which, as you can see, is broken - change your code to:
aTag += arrow + "<span style='" + innerStyle + "'>text here</span>";
and it will work.