如何以正确的方式在Javascript中插入HTML文本?

时间:2014-11-01 03:05:04

标签: javascript html

我有这段代码:

 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); 

但控制台返回错误。我查了一下,看起来html代码打破了javascript代码。错误直接指向这一行“欢迎来到Akecheta,网络战士社交网络。在这里你可以找到博客模板,”

如果我无法澄清我的问题,我很抱歉,我不知道该怎么说。发生的事情是因为html内容整个脚本没有运行,我相信它的格式很糟糕。

编辑1

完整代码:

<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>

编辑2

所以我尝试了这个:

<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>

它完全奏效了。但是这个代码被插入到WYSIWYG编辑器中,所以每当我将html编辑器更改为可视编辑器并返回到html编辑器时,文本代码就会被剥离。

最终编辑

这是我的代码完全正常工作,此代码应该隐藏/显示基于浏览器地址的文本,如果您想使用它,只需将 / free-blogger-templates / 更改为您将运行脚本的当前页面,例如,如果您在 yoursitedotcom / myfirstpage 上运行,请将其更改为 / myfirstpage / $ ,$表示它只会允许网址直到foward斜线 / ,我不得不使用 document.write ,我知道它不是推荐的,但这是我找到的唯一解决方案,这里是:

<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>

文本必须正确转换(感谢用户@God很好(是的,上帝真的很好=)),然后我使用http://www.web2generators.com/html/entities对HTML文本进行编码。

3 个答案:

答案 0 :(得分:3)

javascript中的字符串不能包含换行符。这是另一种选择。

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); 

答案 1 :(得分:1)

你需要创建文本节点而不是附加到P标签而不是附加到dom中 试试这个

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

答案 2 :(得分:0)

你需要逃脱一些角色。试试这个:

&#13;
&#13;
 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); 
&#13;
&#13;
&#13;

编辑:The entire code should look like this JSFIDDLE.