Develop Reference

Can't insert line break in Ajax outputString

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/>";

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.

Regex dont find if inside element?

I think I need a regular expression (javascript) that can only find a string if it is NOT inside an element. IE if I wanted to find the string "Hello" but not in the div "popup"
<div class="popup">optional content Hello world and more</div>
--No Match--
<div>This is more content Hello and welcome</div>
--Match--
Can someone point me in right direction, negative lookahead?
ok should mention how im getting it :) The find already has a reg ex to "hopefully" ignore searching inside html tags but this needs to work on top of it.
var find = "((?![^<]*>) " + data[i].GlossaryWord.trim() + " )";
var replace = " <a class=\"gobig tooltip\" " + "title=\"" + data[i].GlossaryDescription + "\">" + data[i].GlossaryWord.trim().toLowerCase() + "</a> ";
var elementContent = elementContent.replace(new RegExp(find, 'gi'), replace);

Maybe easier to use CSS selectors. Something like:
document.body.querySelectorAll('div:not(.classy)')

javascript next line(\n) on the string not working

Hi this does not make sense I am trying to get put \n to break my sentence but it seems not working ,my code below
"Address:"+location.addressLine1 + " " + location.addressLine2 +"\n "+"Store Name:\n"+ location.storeName +" "+"Geofence:\n"+ location.maxGeofence+" "+"City:\n"+location.city
my goal is to have all the rows in new line ,Like below
Address:xxxxxxx
Store Name:xxxxxx
Gofence:xxxxxx
City:xxxxxxx
but I keep on getting
Address:xxxxxxx Store Name:xxxxxx Gofence:xxxxxx City:xxxxxxx

Either use <br/> in HTML or, if you wish to keep using \n, use the nl2br function from php.js :
function nl2br (str, is_xhtml) {
var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2');
}
This will convert every \n to a <br/>

Instead of using \n, use <br/>
<br /> is HTML element for a line break. <br /> allows to show up as a new line when HTML is rendered in a browser.

In html \n has no effect. Replace it with <br/> or place your code inside <pre> tags.
br - will make a new line inside HTML
pre - code inside will be formated as it was inside a text file (it will understood \n), but you will have to style it.

Here is solution for newline
"Address:"+location.addressLine1 + " " + location.addressLine2 +"<br>"+"Store Name:<br>"+ location.storeName +" "+"Geofence:<br>"+ location.maxGeofence+" "+"City:<br>"+location.city
Note : \n is work only php not in Html so \n will not work here.

how do i create a hard return or new line in javascript

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;