Почему этот скрипт дает только половину результата?

Question

Вот функция:

function funct1() 
{ 
    document.getElementById("demo").innerHTML="Something"; 
    document.write("Mexico!"); 
} 

Выход только:

Mexico 

при нажатии на кнопку на странице, в то время как я хотел выход быть:

Something 
Mexico 

Answer 1

В этом случае document.write() не делает то, что вы думаете. Он очищает содержимое документа и записывает Mexico! (см. Ответ Квентина для более подробного объяснения, почему это так). Если вы удалите эту строку, вы увидите, что ваш первый оператор выполнен правильно.

Если вы хотите обновить первый абзац, а также добавить еще один, вы должны использовать следующий код:

function funct1() 
{ 
    document.getElementById("demo").innerHTML = "Something"; 

    // Create a new <p> element, set its HTML and then append it: 
    var newP = document.createElement('p'); 
    newP.innerHTML = 'Mexico!'; 
    document.body.appendChild(newP); 
} 

Вы можете увидеть рабочую jsFiddle here.

Answer 2

После установки innerHTML демо, вы вызываете document.write. Поскольку в настоящее время документ находится в закрытом состоянии, это делает неявный вызов document.open, который стирает весь существующий документ (включая материал, который вы только что присвоили innerHTML). Тогда Вы пишете Мексика! к новому документу.

Никогда не звоните document.write после того, как DOM готов (и не делайте этого в любое другое время). Вместо этого используйте DOM-манипуляцию.