Jquery put html in

Insert HTML into a div with JavaScript/jQuery

This post will discuss how to insert HTML into a div in JavaScript and jQuery.

1. Using jQuery

With jQuery, you can use the .append() method to insert the specified HTML as the last child of the div container.

JS

HTML

To insert the specified content as the first child of the div container, consider using the .prepend() method instead.

JS

HTML

2. Using JavaScript

In plain JavaScript, the innerHTML property is often used to replace the contents of an element. To insert the HTML into a container rather than replacing its entire contents, you can use the += operator, as shown below:

JS

HTML

Instead of directly changing the innerHTML , you should use the appendChild() method.

JS

HTML

Alternatively, JavaScript has a native method insertAdjacentHTML() to insert the HTML into the document. It takes the position relative to the element, which can be either:

• ‘beforebegin’ : Before the element itself.
• ‘afterbegin’ : Just inside the element, before its first child.
• ‘beforeend’ : Just inside the element, after its last child.
• ‘afterend’ : After the element itself.

JS

HTML

That’s all about inserting HTML into a div in JavaScript and jQuery.

Average rating 4.69 /5. Vote count: 32

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Tell us how we can improve this post?

Thanks for reading.

Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.

Like us? Refer us to your friends and help us grow. Happy coding 🙂

This website uses cookies. By using this site, you agree to the use of cookies, our policies, copyright terms and other conditions. Read our Privacy Policy. Got it

Источник

.html()

Get the HTML contents of the first element in the set of matched elements or set the HTML contents of every matched element.

Contents:

.html() Returns: String

Description: Get the HTML contents of the first element in the set of matched elements.

version added: 1.0 .html()

This method is not available on XML documents.

In an HTML document, .html() can be used to get the contents of any element. If the selector expression matches more than one element, only the first match will have its HTML content returned. Consider this code:

In order for the following ‘s content to be retrieved, it would have to be the first one with class=»demo-container» in the document:

div class="demo-container">
 div class="demo-box">Demonstration Box div>
 div>

The result would look like this:

div class="demo-box">Demonstration Box div>

This method uses the browser’s innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters.

Additional Notes:

• By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

Example:

Click a paragraph to convert it from html to text.

html>
html lang="en">
head>
 meta charset="utf-8">
 title>html demo title>
 style> 
 p 
 margin: 8px;
 font-size: 20px;
 color: blue;
 cursor: pointer;
 >
 b 
 text-decoration: underline;
 >
 button 
 cursor: pointer;
 >
 style>
 script src="https://code.jquery.com/jquery-3.7.0.js"> script>
 head>
body>
 
p>
 b>Click b> to change the span id="tag">html span>
 p>
p>
 to a span id="text">text span> node.
 p>
p>
 This button name="nada">button button> does nothing.
 p>
 
script> 
$( "p" ).on( "click", function( ) 
 var htmlString = $( this ).html();
 $( this ).text( htmlString );
>);
 script>
 
 body>
 html>

div class="demo-container">
 div class="demo-box">Demonstration Box div>
 div>

$( "div.demo-container" )
 .html( "
All new content. You bet!
" );

div class="demo-container">
 p>All new content. em>You bet! em> p>
 div>

$( "div.demo-container" ).html(function( ) 
 var emphasis = "" + $( "p" ).length + " paragraphs!";
 return "
All new content for " + emphasis + "
";
>);

h2>Greetings h2>
div class="container">
 div class="inner">Hello div>
 div class="inner">Goodbye div>
 div>

h2>Greetings h2>
div class="container">
 div class="inner">
 Hello
 p>Test p>
 div>
 div class="inner">
 Goodbye
 p>Test p>
 div>
 div>

div class="container">
 div class="inner">Hello div>
 div class="inner">Goodbye div>
 h2>Greetings h2>
 div>

var $newdiv1 = $( "
 newdiv2 = document.createElement( "div" ),
 existingdiv1 = document.getElementById( "foo" );
 
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );