Adding a new line in innerHTML

Question

Could you guys tell me why I can't make a new line in 'p' tag.

I want the output to look like

var number = 10;
alert(number);

I have tried br tag and \n tag as well, but it didn't really work.

I don't know what is wrong here ..

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>onclick</title>

    <script type="text/javascript">
        function myNum() {

            var willEval = " ";
            //willEval += 'var number = 10; <br/>';
            //I put <br/> before, but error happened saying
            //Uncaught SyntaxError: Unexpected token '<'

            willEval += 'var number = 10;';
            willEval += '\n'; 
            //or willEval += '<br />;

            willEval += '\n alert(number);';

            eval(willEval);
            alert(willEval);

            document.getElementById('demo').innerHTML = willEval + "<br />";

        }

    </script>
</head>


<body>
    <h1>onclick</h1>

    <button onclick="myNum()">
        CLICK ME!
    </button>
    <p id="demo"></p>
</body>
</html>

You need a `br` in a normal HTML context, a line break is only _displayed_ as such under certain conditions (inside a `pre` element, or with special CSS formatting applied.) Your mistake here is that you added the `br` _before_ your whole text content, instead of inserting it _in between_ the two parts, where you currently only placed a `\n`. — CBroe, May 08 '20 at 08:40
Then should I make pre element to put the whole thing inside? — Uhney, May 08 '20 at 08:46
… or insert a `
` instead of a `\n` - depending on what exactly you need, if you need to display this as both an alert _and_ inside the page, you would need to handle both differently, if you went with `
` for the HTML part. — CBroe, May 08 '20 at 08:50
You should explain the code more, its good to see your thoughts and attempts, but what is not clear is the overall outcome that you are looking to achieve. Next time break it down into what the alert box displays vs what you expected, and then do the same for the html. I cannot make this edit for you as there are too many assumptions that I would have to make. — Chris Schaller, May 08 '20 at 15:35

score 0 · Accepted Answer · answered May 08 '20 at 15:32

The alert() function doesn't render HTML, it is generally accepted that alert() only renders ASCII strings, and as such line feeds much be defined with \n (\r\n would also work)

For that matter, it is common to format complex alert() dialogs using \t as well.

alert() passes through directly to the browser, so some browsers will support unicode or extended ASCII character sets. Think about it this way, an alert box is actually a popup dialog from the browser code, not from your page. For this reason the content m,ust conform to the string encoding of that the browser code was written in.

eval() on the other hand:

eval
The eval() function evaluates JavaScript code represented as a string

This function tries to compile and evaluate a string value as if it was javascript code.

<br/> is not javascript code and that is why you cannot eval your string that has <br/> in it.

<br/> is the correct mechanism to inject a line break into a paragraph of HTML text.

ASCII /n has not effect on HTML rendering at all because it is classified as a control character that has no visual representation of the character itself. We commonly refer to these characters as whitespace characters. HTML renders ignore whitespace when rendering, this allows us to add linebreaks in the html code all the time to make it easier to read the code without unnecessarily bloating the page rendering.

This issue between alert() and html rendering of strings is important to know if you want to build a string once and use it in both locations.

So, if you want to dynamically construct javascript code, and that code contains an alert box AND you want a line break in that alert box, then simply use \n then if you want to display that constructed code string in html and preserve the line breaks in the html output you can convert all the \n characters into <br/> using replace():

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>onclick</title>

    <script type="text/javascript">
        function myNum() {
 
            var result = 0;
            var willEval = " ";
            willEval += 'var number = 10;';
            willEval += '\n'; 
            willEval += '\n alert(number);';
            // NOTE: added return statement so we can use the result of the eval
            willEval += '\n return number;';

            var result = eval('(function(){' + willEval + '})()');

            willEval += '\n =' + result;
            alert(willEval);

            document.getElementById('demo').innerHTML = willEval.replace(/\n/g,'<br />');

        }

    </script>
</head>


<body>
    <h1>onclick</h1>

    <button onclick="myNum()">
        CLICK ME!
    </button>
    <p id="demo"></p>
</body>
</html>

These SO posts might be useful

Thank you for your help! I will refer to those websites you gave :) And yes, next time I should have to make my question and code clearer when I ask.. Thanks, again! — Uhney, May 20 '20 at 00:09

Adding a new line in innerHTML

1 Answers1