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

Navigation
1

I have the following excerpt: 

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

I need to add some div within this div , but I do not know how, because if I try to do this it gives error:

NOTEM THE ADDITIONAL SIGN FOR THE 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 ?

    
asked by anonymous 31.05.2017 / 00:30

3 answers

1

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

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

$("elemento").html(str);
    
31.05.2017 / 01:47
1

You can add DOM elements with the help of $.html() in the same way you would do with element.innerHTML , concatenating scripts, but this method is very 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><divid="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><divid="div1">
  Old
</div>
<div id="div2">
  Old
</div>

end an alternative with html that might turn out to be a bit 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><scriptsrc="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>
    
31.05.2017 / 02:16
0

In place of html (); use jquery append () config the example below, I created two separate divs and inserted the 2 in it with 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><divid="teste"></div>
    
31.05.2017 / 04:55
Problems with field mask CSS - aligns images