Question

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)

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.
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. So far, I’ve sorted out the formatted text box, but I’m having issues with the raw 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 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.

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?

Answer 1

I worked it out! 😀

For those of you who are interested, I used ASCII codes for each of the characters required to make up the <, /, and >.

For example: <li> is

<li>

Hope that helps someone else!