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.
Related
I have an Ajax script that outputs both the title and description of certain jobs based on user input. While I can get these displaying without issue, I can't seem to insert a line break between the title and description. I have the following:
outputString = savedData[i].firstName + ". Description: " + savedData[i].cardNumber;
var paragraph = $("<p />", {
text: outputString
});
$("#data").append(paragraph);
I have tried inserting a traditional br line break, as well as, \n and \r\n both in the quotation marks before description which just displays the text of the line break rather than breaking the line, and also outside of the quotation marks which breaks any output. How can I successfully implement a linebreak?
Cheers.
As you are providing the outputString string as text, the html <br/> is being displayed as text in the string. You should specify it in as html and use <br/> for line break:
outputString = dataJobs[i].title + ". <br/>Description: " + dataJobs[i].description;
var paragraph = $("<p />", {
html: outputString
});
$("#data").append(paragraph);
If you would like to add a <br/> specifically, then you can do the following:
// assuming that your dataJobs[i].title and dataJobs[i].description are defined
var paragraph = $("<p />");
paragraph
.append(dataJobs[i].title + '.')
.append('<br />')
.append("Description: " + dataJobs[i].description);
$("#data").append(paragraph);
You need to add a <br/> in a separate append call, but not as part of a string. Hope this helps.
In the code below as the P tag has display property set to block by default, so there is no need for using line break.
Setting Title and Description in two different P tags that will solve your problem
Try the following code.
outputString = "<p>Title: "+dataJobs[i].title+"</p><p>description: "+dataJobs[i].description+"</p>";
$("#data").append(outputString);
I think the "jQuery way" should look like this:
var $outputString = $( "<span>" + dataJobs[i].title + ".<br>Description: " + dataJobs[i].description + "</span>" );
$( "#data" ).append($outputString.wrap( "<p></p>" ));
outputString = dataJobs[i].title + ". Description: " + dataJobs[i].description + "<br/>";
Please don`t get me wrong, I know that I can put a span tag with a class in the paragraph, and then change the color of it. But that is not what I need.
My application is showing some log files in the browser. I am loading the data (from my log file) with AJAX in a p tag. Now i want to change the color of the lines which contains "ERROR" to red. But i need the other lines to be black. So if I write into a span tag, all the errors are on top of the p tag. That is also not what i want.
So for example: I have an info log, an error log, and again an info log.
My lines should have the colors: black, red, black
Does anyone know how I could do that?
Thanks for helping
You've said "lines" so I'm assuming the data is separated with line breaks, such as \n. To make those lines in the paragraph, you'll have to convert them to <br>, and to avoid having < and & misinterpreted in the text of the entries, you'll need to turn them into character entities. So we may as well wrap the error lines in spans, see comments:
// The data
var text =
"INFO: Blah blah blah\n" +
"ERROR: OMG, something went wrong\n" +
"WARNING: Don't run with scissors\n" +
"ERROR: Knife inserted in electrical socket.\n" +
"INFO: More blah";
// First, encode entities
text = text.replace(/&/g, "&").replace(/</g, "<");
// Split into lines
var lines = text.split("\n");
// Wrap errors in error span
lines = lines.map(function(line) {
return line.startsWith("ERROR:") ? "<span class=error>" + line + "</span>" : line;
});
// Combine with <br> and put in the paragraph
document.getElementById("target").innerHTML = lines.join("<br>");
.error {
color: #d00;
}
<p id="target"></p>
That's verbose for the purposes of clarity. Short version:
document.getElementById("target").innerHTML =
text.replace(/&/g, "&").replace(/</g, "<")
.split("\n")
.map(function(line) {
return line.startsWith("ERROR:") ? "<span class=error>" + line + "</span>" : line;
})
.join("<br>");
var text =
"INFO: Blah blah blah\n" +
"ERROR: OMG, something went wrong\n" +
"WARNING: Don't run with scissors\n" +
"ERROR: Knife inserted in electrical socket.\n" +
"INFO: More blah";
document.getElementById("target").innerHTML =
text.replace(/&/g, "&").replace(/</g, "<")
.split("\n")
.map(function(line) {
return line.startsWith("ERROR:") ? "<span class=error>" + line + "</span>" : line;
})
.join("<br>");
.error {
color: #d00;
}
<p id="target"></p>
I'm sorry but there's no direct way to do that as all text within opening and closing HTML tags is considered to be a Text Node (as a whole) and there are no CSS selectors that can do what you are trying to accomplish. My only suggestion for you is to use JavaScript to parse the received text (possibly within the "done" ajax event) to dynamically add the aforementioned tags with its corresponding CSS class.
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
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.
I have the following code snipet:
document.getElementById('PS_FORM/SUBJECT_PROPERTY/Business_Comments').value = com_textcl + "\n" ;
document.getElementById('PS_FORM/SUBJECT_PROPERTY/Business_Comments').value = com_text;
I want each of the values to be in their own line. Is there a way to get this done??
Thanks
Assuming that element (PS_FORM/SUBJECT_PROPERTY/Business_Comments) is a textarea, then the JS should be:
document.getElementById('PS_FORM/SUBJECT_PROPERTY/Business_Comments').value=
com_textcl + "\n" + com_text;
If it's a SELECT the code would be different (update your question).
If it's a div or some other HTML element (rather than a FORM element) then the code would be more like:
document.getElementById('PS_FORM/SUBJECT_PROPERTY/Business_Comments').innerHTML=
com_textcl + "<br />\n" + com_text;