Can I append an HTML document with jQuery?

Question

I am new to jQuery. I know I can use append() to add HTML code within the script, but within the script can I put a link to an HTML document that contains the code? There's a lot of it, so it would get messy in the script.

Is there some HTML code you are trying to manipulate specifically? if so, do update the question with the same. — karthikr, Sep 08 '14 at 01:10
You can use ajax to load the code from an URL and then append it. — jangxx, Sep 08 '14 at 01:11

HelpNeeder · Answer 1 · 2019-03-09T02:23:33.990

2

You can use '.append()' to add HTML code to any HTML element. if this is what you are asking for.

http://api.jquery.com/append/

You can also download external HTML document and manipulate it's contents.

Can i manipulate an external HTML document with JQuery?

http://api.jquery.com/jquery.get/

$.get( "ajax/test.html", function( data ) {
    $( ".result" ).html( data );
    alert( "Load was performed." );
});

edited Mar 09 '19 at 02:23

answered Sep 08 '14 at 01:11

HelpNeeder

6,383
24
91
155

score 1 · Answer 2 · answered Sep 08 '14 at 01:19

There is little detail to your question, so anyone’s ability to help is limited.

According to the docs, it can handle htmlString or Element or Array or jQuery http://api.jquery.com/append/ Since it can handle a jQuery, Try making an ajax call and handling the returned chunk of text that way to retrieve the doc (assuming you know how to script a response). http://api.jquery.com/jQuery.ajax/

Although, I would question why such a large block of text wouldn't just be wrapped in a tag with CSS defining the visibility: hidden with a class toggle()? http://api.jquery.com/toggle/

If you want the UI to appear dynamic, but you are just fetching a static file, I would use the .toggle() technique, or look into other jqueryUI features to show/hide content.

score 1 · Answer 3 · answered Sep 08 '14 at 02:05

Jquery provide this function specially for this action. This code create one ajax call and append code in the id specified also you have one callback when finished.

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

http://api.jquery.com/load/

Can I append an HTML document with jQuery?

3 Answers3