user1096494
user1096494

Reputation:

How can I insert HTML text in Javascript the right way?

I have this code:

 var p = document.createElement("p"); 

p.innerHTML = "Welcome to Akecheta, the web warrior social network. Here you&#39;ll find blogger templates, a freelancers area, Question &amp;&nbsp;Answers Forum, create your own blog and will be able to interact with other people.<br />
Download Free Blogger Templates, Free Blogger Templates Download, Templates for blogspot blogs, Free download, Free templates for blogspot blogs, Free templates for blogspot blogs download."; 
document.body.appendChild(p); 

But the console is returning an error. I checked it out, it looks like the html code is breaking the javascript code. The error points directly to this line "Welcome to Akecheta, the web warrior social network. Here you'll find blogger templates,"

I'm sorry if I can't clarify my question, I don't know how to put that into words. What's happening is that the whole script is not running because of that html content, I believe it's badly formatted.

EDIT 1

Full code:

<script>// <![CDATA[
var regex = new RegExp("/testurl/$");
if(document.URL.match(regex))
{

var p = document.createElement("p"); 

p.innerHTML = "Welcome to Akecheta, the web warrior social network. Here you\'ll find blogger templates, a freelancers area, Question \& Answers Forum.  You can even create your own blog to interact with other people.<br/><br/>Download Free Blogger Templates, Free Blogger Templates Download, Templates for blogspot blogs, Free download, Free templates for blogspot blogs, Free templates for blogspot blogs download."; 
document.body.appendChild(p); 

}
else {
document.write('');
  }
// ]]></script>

EDIT 2

So I tried this:

<script>// <![CDATA[
var regex = new RegExp("/free-blogger-templates/$");
if(document.URL.match(regex))
{
document.write('Welcome to Akecheta, the web warrior social network. Here you\'ll find blogger templates, a freelancers area, Question \& Answers Forum.  You can even create your own blog to interact with other people.<br/>Download Free Blogger Templates, Free Blogger Templates Download, Templates for blogspot blogs, Free download, Free templates for blogspot blogs, Free templates for blogspot blogs download.');
}
else {
document.write('');
  }
// ]]></script>

And it fully worked. But this code is being inserted on a WYSIWYG editor, so whenever I change the html editor to the visual editor and get back to the html editor, the text code gets stripped.

FINAL EDIT

Here is my code fully working, this code is supposed to hide/show a text based on the browser address, if you want to use it, just change /free-blogger-templates/ to the current page where you'll run your script, for example, if you're running on yoursitedotcom/myfirstpage, change it to /myfirstpage/$, the $ means it will just allow the url until the foward slash /, I had to use document.write, I know it's not recomended, but that's the only solution I found, here it is:

<script>// <![CDATA[
var regex = new RegExp("/free-blogger-templates/$"); if(document.URL.match(regex)) { document.write('Welcome to Akecheta, the web warrior social network. Here you\'ll find blogger templates, a freelancers area, Question \&amp; Answers Forum. You can even create your own blog to interact with other people. Download Free Blogger Templates, Free Blogger Templates Download, Templates for blogspot blogs, Free download, Free templates for blogspot blogs, Free templates for blogspot blogs download.'); } else { document.write('');   }
// ]]></script>

The text had to be properly converted (Thanks to the user @God is good (Yeah, God is really good =]), then I used http://www.web2generators.com/html/entities to encode the HTML text.

Upvotes: 0

Views: 178

Answers (3)

Ian Hazzard
Ian Hazzard

Reputation: 7771

You needed to escape some of your characters. Try this:

 var p = document.createElement("p"); 

p.innerHTML = "Welcome to Akecheta, the web warrior social network. Here you\'ll find blogger templates, a freelancers area, Question \& Answers Forum.  You can even create your own blog to interact with other people.<br/><br/>Download Free Blogger Templates, Free Blogger Templates Download, Templates for blogspot blogs, Free download, Free templates for blogspot blogs, Free templates for blogspot blogs download."; 
document.body.appendChild(p); 

EDIT: The entire code should look like this JSFIDDLE.

Upvotes: 0

Syed Arif Iqbal
Syed Arif Iqbal

Reputation: 1427

You Need To Create Text Node Than Append into P tag and than append into the dom
try this

var p = document.createElement("p"); 
var text = document.createTextNode("Welcome to Akecheta, the web warrior social network. Here you&#39;ll find blogger templates, a freelancers area, Question &amp;&nbsp;Answers Forum, create your own blog and will be able to interact with other people.<br />
Download Free Blogger Templates, Free Blogger Templates Download, Templates for blogspot blogs, Free download, Free templates for blogspot blogs, Free templates for blogspot blogs download.");

p.appendChild(text); 
document.body.appendChild(p);

See DEMO HERE

Upvotes: 1

Andy Ray
Andy Ray

Reputation: 32066

Strings in javascript can't have line breaks in them. Here is one alternative.

p.innerHTML = "Welcome to Akecheta, the web warrior social network. Here you&#39;ll find blogger templates, a freelancers area, Question &amp;&nbsp;Answers Forum, create your own blog and will be able to interact with other people.<br />" +
"Download Free Blogger Templates, Free Blogger Templates Download, Templates for blogspot blogs, Free download, Free templates for blogspot blogs, Free templates for blogspot blogs download."; 
document.body.appendChild(p); 

Upvotes: 3

Related Questions