Question

I have such long html code, for alert when you have old browser:

<div class="ie-message" style="display: block; ">
      <div class="alert error">
        <h2>
          Sorry, your web-browser is outdated
        </h2>
        <p>
          We recommend you install new version of web-browser
        </p>
      </div>
      <div class="browsers-list">
        <div class="browser-button chrome">
          <a href="http://www.google.com/chrome">Google Chrome</a>
        </div>
        <div class="browser-button firefox">
          <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a>
        </div>
        <div class="browser-button opera">
          <a href="http://www.opera.com/download/">Opera</a>
        </div>
        <div class="browser-button safari">
          <a href="http://www.apple.com/safari/download/">Apple Safari</a>
        </div>
        <div class="browser-button ie">
          <a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx">Internet Explorer</a>
        </div>
      </div><div class=?"ie-message" style=?"display:? block;? ">?<div class="ie-message" style="display: block; ">
      <div class="alert error">
        <h2>
          Sorry, your web-browser is outdated
        </h2>
        <p>
          We recommend you install new version of web-browser
        </p>
      </div>
      <div class="browsers-list">
        <div class="browser-button chrome">
          <a href="http://www.google.com/chrome">Google Chrome</a>
        </div>
        <div class="browser-button firefox">
          <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a>
        </div>
        <div class="browser-button opera">
          <a href="http://www.opera.com/download/">Opera</a>
        </div>
        <div class="browser-button safari">
          <a href="http://www.apple.com/safari/download/">Apple Safari</a>
        </div>
        <div class="browser-button ie">
          <a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx">Internet Explorer</a>
        </div>
      </div>

How can I append it using jquery? when i write this all in one string I get what i need

$('body').append('<div class="ie-message" style="display: block; "><div class="alert error"><h2>Sorry, your web-browser is outdated</h2><p>We recommend you install new version of web-browser</p></div><div class="browsers-list"><div class="browser-button chrome"><a href="http://www.google.com/chrome">Google Chrome</a></div><div class="browser-button firefox"><a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a></div><div class="browser-button opera"><a href="http://www.opera.com/download/">Opera</a></div><div class="browser-button safari"><a href="http://www.apple.com/safari/download/">Apple Safari</a></div><div class="browser-button ie"><a href="http://www.microsoft.com/windows/Internet-explorer/default.aspx">Internet Explorer</a></div></div><div class="close-text">close</div></div>');

, but how to make that every html tag will be on new line?

Answer 1

You need to append each element as you create it, and set attributes using .attr()
e.g.

var div = document.createElement("div");
$(div).attr("class", "ie-message");
$.('body').append(div);

var subDiv = document.createElement("div");
$(subDiv).attr("class", "browser-list");
$.(div).append(subDiv);

etc.

although if setting class attributes you should use .addClass() and when setting css attributes you are best of using .css() e.g.

$(div).addClass("ie-message");

and

$(div).css("display", block");