Добавление новой строки в innerHTML - PullRequest
Новая
       95

Добавление новой строки в innerHTML

0 голосов
/ 08 мая 2020

Не могли бы вы сказать мне, почему я не могу создать новую строку в теге 'p'.

Я хочу, чтобы результат выглядел как

var number = 10;
alert (number);

Я тоже пробовал тег br и тег \ n, но на самом деле это не сработало.

Я не знаю, что такое здесь не так .. 

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

1 Ответ

0 голосов
/ 08 мая 2020

Функция alert () не отображает HTML, общепринято, что alert() отображает только строки ASCII, и поэтому перевод строки в значительной степени определяется с помощью \n (\r\n также будет работать)

  • В этом отношении обычно для форматирования сложных диалогов alert() также используется \t.

alert() проходит напрямую в браузер, поэтому некоторые браузеры будут поддерживать кодировку Unicode или расширенные наборы символов ASCII. Подумайте об этом так: окно предупреждения на самом деле является всплывающим диалоговым окном из кода браузера, а не с вашей страницы. По этой причине содержимое m должно соответствовать строковой кодировке, в которой был написан код браузера.

eval() с другой стороны:

eval
Функция eval () оценивает JavaScript код, представленный в виде строки

Эта функция пытается скомпилировать и оценить строковое значение, как если бы оно было javascript код .

<br/> не является кодом javascript, и поэтому вы не можете eval свою строку, в которой есть <br/>.

<br/> - правильный механизм для вставки разрыва строки в абзац текста HTML.

ASCII / n вообще не влияет на рендеринг HTML, потому что классифицируется как элемент управления символ, не имеющий визуального представления самого персонажа. Обычно мы называем эти символы пробелами символами. HTML рендеринг игнорирует пробелы при рендеринге, это позволяет нам постоянно добавлять разрывы строк в html коде, чтобы упростить чтение кода без ненужного раздувания рендеринга страницы.

Эту проблему между alert() и html рендерингом строк важно знать, если вы хотите создать строку один раз и использовать ее в обоих местах.

Итак, если вы хотите динамически создайте код javascript, и этот код содержит окно предупреждения И вы хотите, чтобы в этом окне предупреждения был разрыв строки, тогда просто используйте \n, тогда, если вы хотите отобразить этот построенный код строка в html и сохранить разрывы строк в выводе html, вы можете преобразовать все символы \n в <br/>, используя 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>

Эти сообщения SO могут быть полезны

...