printing jquery value inside html elements

Question

printing jquery value inside html elements

I have a jQuery code snippet that is currently displaying an alert popup when triggered. However, I would like to print the result in the HTML body instead. I attempted the following but it did not work:

// Do What You Want With Result .......... :)
$("#printermodel").change(function() {
    //'you select     
    Model = ' + $('#manufacturer').val() + 'type=' + $('#printertype').val() + 'And Model=' + $('#printermodel').val()
    alert('you select Model = ' + $('#manufacturer option:selected').text() + ' ,type= ' + $('#printertype option:selected').text() + ' And Model = ' + $('#printermodel option:selected').text());
});
});

<div id="manufacturer"></div>

javascript jquery html css ajax

Answer 1

Answer №1

Inserting text within a div element is done using the text method:

$('#company').text($('#company option:selected').text());

For more information, refer to: http://api.jquery.com/text/

To insert HTML content inside a div, use the html method instead of text

Answer 2

Inserting text within a div element is done using the text method:

$('#company').text($('#company option:selected').text());

For more information, refer to: http://api.jquery.com/text/

To insert HTML content inside a div, use the html method instead of text

Answer 3

Answer №2

$('#manufacturer').html(('Your selection: Model = '+
$('#manufacturer option:selected').text()+' ,type= '+
$('#printertype option:selected').text()+' And Model = '+
$('#printermodel option:selected').text());

Answer 4

$('#manufacturer').html(('Your selection: Model = '+
$('#manufacturer option:selected').text()+' ,type= '+
$('#printertype option:selected').text()+' And Model = '+
$('#printermodel option:selected').text());

Answer 5

Answer №3

If you're looking to take a more advanced approach, I suggest using templates. One option is to utilize the official jquery-tmpl plugin.

To implement this, you'll need to add jquery and

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

plugin to your website. Then, you can do something like this:

Html:

<div id="target"></div>

Javascript:

$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );

You can customize it according to your requirements and even load the template (first parameter of tmpl) from a file

Check out this jsfiddle

Answer 6

If you're looking to take a more advanced approach, I suggest using templates. One option is to utilize the official jquery-tmpl plugin.

To implement this, you'll need to add jquery and

http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js

plugin to your website. Then, you can do something like this:

Html:

<div id="target"></div>

Javascript:

$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );

You can customize it according to your requirements and even load the template (first parameter of tmpl) from a file

Check out this jsfiddle

printing jquery value inside html elements

Answer №1

Answer №2

Answer №3

Similar questions

The Angular directive is failing to refresh the data on the Google Map

The useRouter hook from next/router was unable to connect because NextRouter was not activated

Troubleshooting VueJS: Issues with V-for display behavior

Error encountered while attempting to use single quotation marks in MySQL databases

How to extract text from a <div> element using Selenium

What is the best way to receive a JSON response in CodeIgniter view after making an AJAX call?

setting a callback function as a variable

having trouble with if and else if statements functioning properly

How can one easily remove the parent directory from a path when working with Node.js?

Forward to the login page when an ajax request is made

Iterating over a JSON object with an embedded index in Angular using ng-repeat

How come the button is shifting down even though it's set to display inline?

In search of the HTML code for the forward button when extracting content from a webpage

Troubleshooting Issue with Filtering Nested Object Array Based on Property

Page redirects automatically after AJAX call

Tips for retrieving the 'Created' value in vue.js

Attempting to craft a multi-filter feature using AngularJS that will allow for the precise filtering of JSON data based on both month and year identifiers

A guide on obtaining auto-suggested latitude and longitude coordinates within ng-model in AngularJS, then storing them in MongoDB with the help of M

The ripples can be found at the bottom of the map, not at the front

Is there a practical limit for uploading HTML files?