Add in html code via jQuery

Question

Add in html code via jQuery

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (0 votes)

1

I'm trying to add an HTML code to my HTML via jQuery, while any text works, already with a non-bootstrap tag 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
     {

     }

});

Does not work, is there any function other than 'append'?

html jquery

asked by anonymous 23.11.2014 / 00:59

3 answers

Alternative to Session How to plot charts using QCustomPlot in main thread?

score 3 · Answer 1

The problem with this append snippet is a syntax error because of nested double quotation marks. 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 name of a variable, for example), but in language grammar it does not make sense to have an identifier attached to a string. In Chrome this gives the Unexpected identifier error (that is, I found an identifier where it should not).

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

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

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

score 2 · Answer 2

In addition to the problem that @bfavaretto indicated with the quotes, ie:

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

should be:

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

.append() adds content while retaining existing content. You may want to use .html() that deletes existing content and replaces it with new content. That is:

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

If you want to use% inverted%, that is, adding new content before existing content can use .append()

score 0 · Answer 3

In addition to fixing the problem of the quotation marks, 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 inside the paragraph needs more HTML, change jQuery.text () by jQuery.html () or make more of this type of composition by creating the HTML to be added to the main DIV and creating another object from another element. And finally, add everything to the DIV.

I find it more complicated, the code is difficult to read, but see 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><divid="divPrincipal"></div>