How to add multiple elements within jQuery’s html() function?

Question

I have the following excerpt:

$('#div').html();

I need to add some div within that div, but I don’t know how, because if I try to do this way it’s wrong:

NOTE THE ADDITION SIGNAL FOR CONCATENATION

$('#div').html($('<div>',{id: 'divteste', class: 'divteste'}).html('DIV 1') + $('<div>', {id: 'div2', class: 'teste2'}).html('DIV 2'));

The question is: How do I concatenate the addition of several div within a function html() of jQuery?

Answer 1

This method only accepts a string with argument. I believe you have received a parseHTML error. You could assemble a string this way:

var str = "";
str += "<div id='meuId'>;
str += "<div class='minhaClasse'></div><!-- /.minhaClasse -->";
str += "</div><!-- /#meuId -->";

$("elemento").html(str);

Answer 2

You can add DOM elements with the help of $.html() as it would with the element.innerHTML, concatenating scripts, but this method is rather inefficient.

var div1 = $('#div1');
div1.html("");
div1.html(div1.html() + $('<div>', {id: 'trecho11', class: 'divteste' }).html('DIV 1.1').wrapAll('<div>').parent().html());
div1.html(div1.html() + $('<div>', {id: 'trecho12', class: 'divteste' }).html('DIV 1.2').wrapAll('<div>').parent().html());

var div2 = $('#div2');
div2.html("");
div2.html(div2.html() + '<div id="trecho21" class="divteste">DIV 2.1</div>');
div2.html(div2.html() + '<div id="trecho22" class="divteste">DIV 2.2</div>');

var div3 = document.querySelector('#div3');
div3.innerHTML = "";
div3.innerHTML += '<div id="trecho31" class="divteste">DIV 3.1</div>';
div3.innerHTML += '<div id="trecho32" class="divteste">DIV 3.2</div>';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">

</div>
<div id="div2">

</div>
<div id="div3">

</div>

now a more optimized way to do the same.:

var div1 = $('#div1');
div1.empty("");
div1.append($('<div>', {id: 'trecho11', class: 'divteste' }).html('DIV 1.1'));
div1.append($('<div>', {id: 'trecho12', class: 'divteste' }).html('DIV 1.2'));

var createBloco = function (id, conteudo) {
  var bloco = document.createElement('div');
  bloco.id = id;
  bloco.classList.add('divteste');
  bloco.textContent = conteudo;
  return bloco;
};

var div2 = document.querySelector('#div2');
while (div2.firstChild) div2.removeChild(div2.firstChild);
div2.appendChild(createBloco('trecho21', 'DIV 2.1'));
div2.appendChild(createBloco('trecho21', 'DIV 2.1'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  Old
</div>
<div id="div2">
  Old
</div>

for order an alternative with html that may turn out to be a little more elegant.:

var tmpl = Handlebars.compile($('#tmpl').html());
var html = tmpl([ 'DIV 1', 'DIV 2','DIV 3' ]);
$('#div1').html(html);

var source = document.querySelector('#tmpl').textContent;
var tmpl = Handlebars.compile(source);
var html = tmpl([ 'DIV 1', 'DIV 2','DIV 3' ]);
document.querySelector('#div2').innerHTML = html;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>

<div id="div1"></div>
<div id="div2"></div>
<script id="tmpl" type="text/x-handlebars-template">
{{#each this}}
  <div id="elem{{@index}}" class="divteste">
    {{this}}
  </div>
{{/each}}
</script>

Answer 3

Instead of html(); use the jquery append() confome the example below, I created two separate Ivs and inserted the 2 in it with the append, just adapt to your method

var div1 = "<div>nada</div>";
var div2 = "<div>nada denovo</div>";

$("#teste").append(div1);
$("#teste").append(div2);

alert($("#teste").html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="teste"></div>