Как я могу получить оба выхода? - PullRequest
Новая
       25

Как я могу получить оба выхода?

1 голос
/ 09 июня 2019

Я запускал несколько базовых тестовых случаев с document.write(), который удаляет весь существующий HTML в теге head. Желаемый вывод получается только тогда, когда я помещаю скрипт в тег <body>.

Запустил скрипт в теле с успехом. Но скрипт приводит к проблемам при использовании в теге <head>. 

<html>
<head>
  <title>Output</title>
  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Text";
      document.write(5 + 6);
    }
  </script>
</head>
<body>
  <p id="demo">
    <button onclick="myFunction()">Touch me</button>
  </p>
</body>
</html>

Ожидаемый результат - Текст 11. Но только 11 виден.

Ответы [ 3 ]

4 голосов
/ 09 июня 2019

document.write сотрет все, что у вас было раньше. Сначала вы устанавливаете innerHTML элемента с идентификатором demo на Text, но затем вы используете document.write, который полностью удалит ваш существующий html и заменит его на 11. Вы можете добавить сумму чисел к Text. 

function myFunction() {
  const num = 5 + 6;
  document.getElementById("demo").innerHTML = "Text " + num;
  //document.write(5 + 6);

}
<p id="demo">
  <button onclick="myFunction()">Touch me</button>
</p>

Если у вас нет кода html, используйте textContent вместо innerHTML. 

function myFunction() {
  document.getElementById("demo").textContent = `Text ${5+6}`;
}
<p id="demo">
  <button onclick="myFunction()">Touch me</button>
</p>
0 голосов
/ 09 июня 2019

Вы можете передать строку Текст на write function вместе с этими числами 

document.write(`Text ${5+6}`)


<html>

<head>
  <title>Output</title>
  <script>
    function myFunction() {
      document.write(`Text ${5+6}`);

    }
  </script>

</head>

<body>
  <p id="demo">
    <button onclick="myFunction()">Touch me</button>
  </p>


</body>

</html>
0 голосов
/ 09 июня 2019

Размещение скрипта в <head> не является проблемой.

Метод write () чаще всего используется для тестирования: если он используется после полной загрузки документа HTML, он будет удаленвесь существующий HTML

Попробуйте добавить содержимое, используя сам атрибут innerHTML.

Дополнительная информация о записи: https://developer.mozilla.org/en-US/docs/Web/API/Document/write

...