Adicionando elementos dinâmicamente.

by Yure Pereira

HTML

<div id="show-animals"></div>

CSS

.underlined-list {
  border-bottom: 1px solid #000;
}

.underlined {
  text-decoration: underline;
}

JavaScript

var showAnimals = $('#show-animals');
var html = '<div class="list-animals">';
html += '<ul>';
html += '<li>Cat</li>';
html += '<li>Dog</li>';
html += '<li>Mouse</li>';
html += '<li>Horse</li>';
html += '<li>Elephate</li>';
html += '</ul>';
html += '</div>';

html += '<div class="list-animals">';
html += '<ul>';
html += '<li>Cat</li>';
html += '<li>Dog</li>';
html += '<li>Mouse</li>';
html += '<li>Horse</li>';
html += '<li>Elephate</li>';
html += '</ul>';
html += '</div>';

html += '<div class="list-animals">';
html += '<ul>';
html += '<li>Cat</li>';
html += '<li>Dog</li>';
html += '<li>Mouse</li>';
html += '<li>Horse</li>';
html += '<li>Elephate</li>';
html += '</ul>';
html += '</div>';

var objectHtml = $(html);

objectHtml.each(function() {
  $(this).addClass('underlined-list');
});

objectHtml.find('li').each(function() {
  $(this).addClass('underlined');
});

showAnimals.append(objectHtml);