homepage Welcome to WebmasterWorld Guest from 54.234.147.84
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to insert html elements using html() jQuery method
dbarasuk




msg:4612288
 1:19 pm on Sep 24, 2013 (gmt 0)

Hi,
I'm trying to insert a select html element in a div section of a web page by clicking a link whose href property containts a hash (#). To my big surprise, after the click on the link, the select element appears on the page but the source code of the generated page does not contain any <select>...</select> tags in the appointed div.

I do this by selecting the div element like this:
var $select = $('<select><option value="1">Option1</option></select>');
$('#cent').html($select);
div#cent is written manually and I want to add the select element inside of it. What is the problem for the html() method? It shows the expected result on the page but fails to insert real select tags on the page. Subsequent action on the select element by for exemple a server language (ex PHP) yields no result as the select element do not exist physically on the page. What can I do to see the inserted tags on the page?

Thanks for your precious help

 

daveVk




msg:4612293
 1:45 pm on Sep 24, 2013 (gmt 0)

Try

var select = '<select><option value="1">Option1</option></select>';
$('#cent').html(select);

I think you need pass in the html as text, rather than a jQuery object.

Fotiman




msg:4612294
 1:47 pm on Sep 24, 2013 (gmt 0)

You will never see client side (JavaScript) generated elements appear in the source (I assume you mean by doing View > Source in the browser), because the "source" hasn't actually changed. However, if you use something like a DOM inspector, you will see the element in the DOM (DOM stands for Document Object Model). Form elements added to the DOM can be submitted to the server side (PHP, etc.) as long as the element is within the <form></form> tags and is named.

In your example, though, you've forgotten to give the select element a name, and therefore it will not get submitted to the server.

Fotiman




msg:4612297
 1:53 pm on Sep 24, 2013 (gmt 0)


I think you need pass in the html as text, rather than a jQuery object.

Either seems to work, but you're right, the documentation [api.jquery.com] does say that the html method takes an HTMLString.

capturts




msg:4612308
 2:54 pm on Sep 24, 2013 (gmt 0)

You could use the .append() method if you do want to pass it as an object.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved