简体   繁体   English

用Javascript字符串显示HTML代码

[英]Display HTML code in Javascript string

I hope the title explains what I'd like to achieve. 我希望标题能说明我想要实现的目标。 If not, please read on! 如果没有,请继续阅读!

I am currently coding a Lorem Ipsum generator (as a learning experience, though I may have it on my site for S&G's) 我目前正在编码Lorem Ipsum生成器(作为学习经验,尽管我可以在我的网站上将其用于S&G的)

So far, I've managed to get the code to output a random sentence from a list, into the text box. 到目前为止,我设法获得了将列表中的随机句子输出到文本框中的代码。 I've also created a generator for creating Lorem Ipsum bullet lists. 我还创建了一个生成器,用于创建Lorem Ipsum项目符号列表。 Whenever someone generates some text via the tool, I'd like to have one box with the formatted text (paragraphes, bulleted, etc) and then another box with the raw HTML code, so designers can just copy and paste the code straight into their coding program. 每当有人通过该工具生成一些文本时,我想要一个带有格式化文本(段落,项目符号等)的框,然后另一个带有原始HTML代码的框,因此设计人员只需将代码直接复制并粘贴到他们的文件中即可。编码程序。 So far, I've sorted out the formatted text box, but I'm having issues with the raw HTML. 到目前为止,我已经整理了格式化的文本框,但是原始HTML出现了问题。

This is what I've got so far: 到目前为止,这是我得到的:

[Obviously there's a var listArray at the beginning, but I won't bother adding that.] [显然在开始时有一个var listArray,但我不会再添加它。

var randomList = listArray[(Math.floor(Math.random() *listArray.length))]

document.getElementById("textarea").innerHTML = "<li>" + (randomList) + "</li>" + "<li>" + (randomList) + "</li>" + "<li>" + (randomList) + "</li>";
document.getElementById("textarea-code").innerHTML = "<li>" + randomList + "</li>" + "<li>" + randomList + "</li>" + "<li>" + randomList + "</li>";}

The second innerHTML line is just a copy of the first, and is the line I want to work on. 第二行innerHTML行只是第一行的副本,是我要处理的行。

How do I get that second line to output: 如何获得第二行输出:

<li> Line 1 </li>
<li>li Line 2 </li>

into the HTML text box, instead of putting the list items into a bulleted point? 到HTML文本框中,而不是将列表项放到项目符号中?

对于第二行,请使用innerText而不是innerHTML

document.getElementById("textarea-code").innerText = 'your html code'

I worked it out! 我解决了! :D :d

For those of you who are interested, I used ASCII codes for each of the characters required to make up the <, /, and >. 对于感兴趣的人,我对组成<,/和>的每个字符都使用了ASCII码。

For example: <li> is 例如:<li>是

&#60;li&#62;

Hope that helps someone else! 希望对别人有帮助!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM