В чем различие выводов сообщений?

144

23 июля 2019, 07:50

Цель: вывести на экран сообщение в контейнере с id="alert-container".
Написать можно по-разному:

var alertContainer = document.getElementById('alert-container');
alertContainer.innerHTML =
    '<div class="alert alert-danger alert-dismissible" role="alert">' +
        '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
        '<strong>Внимание! </strong>' + message +
    '</div>';

или

var alertContainer = document.getElementById('alert-container');
var alertDangerContainer = document.createElement('div');
alertDangerContainer.className = 'alert alert-danger alert-dismissible';
alertDangerContainer.setAttribute('role', 'alert');
var buttonTimes = document.createElement('button');
buttonTimes.className = 'close';
buttonTimes.type = 'button';
buttonTimes.setAttribute('data-dismiss', 'alert');
buttonTimes.setAttribute('aria-label', 'Close');
var spanButtonTimes = document.createElement('span');
spanButtonTimes.setAttribute('aria-hidden', 'true');
spanButtonTimes.innerHTML = '&times;';
buttonTimes.appendChild(spanButtonTimes);
var alertWarningStrong = document.createElement('strong');
alertWarningStrong.appendChild(document.createTextNode("Внимание! "));

alertDangerContainer.appendChild(buttonTimes);
alertDangerContainer.appendChild(alertWarningStrong);
alertDangerContainer.appendChild(document.createTextNode(message));
alertContainer.appendChild(alertDangerContainer);

Есть ли различие? Как лучше?

Answer 1

Различий несколько, например, в первом примере содержимое alertContainer заменится полностью, во втором - добавится один элемент.

Но более глобальное отличие можно увидеть передав в message допустимую html разметку:

в первом случае она отобразиться как html, во втором - это будет обычный текст:

function A1(message) { 
  var alertContainer = document.getElementById('alert-container'); 
 
  alertContainer.innerHTML = 
    '<div class="alert alert-danger alert-dismissible" role="alert">' + 
    '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + 
    '<strong>Внимание! </strong>' + message + 
    '</div>'; 
} 
 
function A2(message) { 
 
  var alertContainer = document.getElementById('alert-container'); 
 
  var alertDangerContainer = document.createElement('div'); 
  alertDangerContainer.className = 'alert alert-danger alert-dismissible'; 
  alertDangerContainer.setAttribute('role', 'alert'); 
 
  var buttonTimes = document.createElement('button'); 
  buttonTimes.className = 'close'; 
  buttonTimes.type = 'button'; 
  buttonTimes.setAttribute('data-dismiss', 'alert'); 
  buttonTimes.setAttribute('aria-label', 'Close'); 
 
  var spanButtonTimes = document.createElement('span'); 
  spanButtonTimes.setAttribute('aria-hidden', 'true'); 
  spanButtonTimes.innerHTML = '&times;'; 
 
  buttonTimes.appendChild(spanButtonTimes); 
 
  var alertWarningStrong = document.createElement('strong'); 
  alertWarningStrong.appendChild(document.createTextNode("Внимание! ")); 
 
 
  alertDangerContainer.appendChild(buttonTimes); 
  alertDangerContainer.appendChild(alertWarningStrong); 
  alertDangerContainer.appendChild(document.createTextNode(message)); 
 
  alertContainer.appendChild(alertDangerContainer); 
} 
 
A1('<b>bold text</b>'); 
A2('<b>bold text</b>');