Purpose: display a message in a container with id="alert-container" .
You can write in different ways:

 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>';

or

 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);

Is there a difference? Which is better

  • one
    There are no particular differences. In the first case, there is a danger that the message may contain unsafe data. In the second case, you can easily add event handlers. - Stepan Kasyanenko
  • The first option is better, as it is easier to rule. Better yet, use a templating engine, such as ejs . - holden321

1 answer 1

There are several differences, for example, in the first example, the contents of the alertContainer will be replaced completely, in the second - one element will be added.

But a more global difference can be seen by passing a valid html markup to the message:

in the first case, it will appear as html, in the second, it will be plain text:

 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>'); 
 <div id="alert-container"></div>