Add to html code via jQuery

Question

I’m trying to add an HTML code to my HTML via jQuery,Entering any text works,already with a bootstrap tag does not For example:

$(function($){


$('#enviar').click(function (e) {


    var linhas = $('#linhas').val();
    var plantas = $('#plantas').val();
    var combo=$('#haoum').val();

    var resultado=Number(linhas)+Number(plantas);
    $("#tam").attr("value", resultado);
     if ( combo=="ha" ) {
         $("#divPrincipal").append("Teste");
     }
     else
     {

     }

});

When I run the code a test appears between these tags:

<div id="divPrincipal">

            </div>

But when I put it for example:

$(function($){


$('#enviar').click(function (e) {


    var linhas = $('#linhas').val();
    var plantas = $('#plantas').val();
    var combo=$('#haoum').val();

    var resultado=Number(linhas)+Number(plantas);
    $("#tam").attr("value", resultado);
     if ( combo=="ha" ) {
         $("#divPrincipal").append("<p class="text-success">Teste</p>");
     }
     else
     {

     }

});

It doesn’t work, there is some other function other than 'append'?

Answer 1

The problem with this section of append is a syntax error because of the nested double quotes. This:

"<p class="text-success">Teste</p>"

It is interpreted as two strings with text-success in the middle:

string 1: "<p class="
???:      text-success
string 2: ">Teste</p>"

The middle piece is understood as an identifier (a variable name, for example), but in language grammar it makes no sense to have an identifier stuck to a string. In Chrome this gives the error of Unexpected Identifier (that is, I found an idenficator where it should not).

It is highly recommended to open the browser console as you develop it. All errors of this type will be shown there. Each browser has a command to open the console. On Windows, usually F12 usually open it, but if it doesn’t work, look for "tools" or "developer tools" in your browser menus.

The solution in this case is well, simple, just use simple quotes outside your string:

$("#divPrincipal").append('<p class="text-success">Teste</p>');

Answer 2

Apart from the problem that the @bfavaretto indicated with the quotes, ie:

$("#divPrincipal").append("<p class="text-success">Teste</p>");

must be:

$("#divPrincipal").append('<p class="text-success">Teste</p>');

The .append() adds content while maintaining existing content. You may want to use .html() which deletes the existing content and replaces it with new. That is:

$("#divPrincipal").html('<p class="text-success">Teste</p>');

If you want to use the .append() reversed, that is by joining new content before existing content can use .prepend()

Answer 3

In addition to fixing the quote problem, you can create the object of an element in Runtime, add the desired class and add it to the other:

$( '<p/>' ).text( 'Teste' ).addClass( 'text-success' ).appendTo( '#divPrincipal' );

The output, inspecting the created element:

<div id="divPrincipal">
    <p class="text-success">Teste</p>
</div>

If the text within the paragraph needs more HTML, change it jQuery.text() for jQuery.html() or do more of this type of composition, creating the HTML to be added to the main DIV and, within it, create another object, another element. And finally, add everything to the DIV.

I find it more complicated, the code gets hard to read, but look at an example:

$( '<p/>' ).text( 'Sucesso' ).addClass( 'text-success' ).prepend(
    
    $( '<span/>' ).addClass( 'glyphicon glyphicon-ok' )
    
).appendTo( '#divPrincipal' );

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divPrincipal"></div>