Put html in div javascript

Question

With jQuery, it is easy to add new elements/content.

Table of Contents Show

Add New HTML Content
jQuery append() Method
jQuery prepend() Method
Add Several New Elements With append() and prepend()
jQuery after() and before() Methods
Add Several New Elements With after() and before()
jQuery Exercises
Test Yourself With Exercises
jQuery HTML Reference
The Element.innerHTML property
The Element.outerHTML property
The Node.textContent property
The Element.innerText property
Which one should you use?

Add New HTML Content

We will look at four jQuery methods that are used to add new content:

append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements

jQuery append() Method

The jQuery append() method inserts content AT THE END of the selected HTML elements.

jQuery prepend() Method

The jQuery prepend() method inserts content AT THE BEGINNING of the selected HTML elements.

Add Several New Elements With append() and prepend()

In both examples above, we have only inserted some text/HTML at the beginning/end of the selected HTML elements.

However, both the append() and prepend() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the examples above), with jQuery, or with JavaScript code and DOM elements.

In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we append the new elements to the text with the append() method (this would have worked for prepend() too) :

Example

function appendText() {
 var txt1 = "Text."; // Create element with HTML
 var txt2 = $("").text("Text."); // Create with jQuery
 var txt3 = document.createElement("p"); // Create with DOM
 txt3.innerHTML = "Text.";
$("body").append(txt1, txt2, txt3); // Append the new elements
}

Try it Yourself »

jQuery after() and before() Methods

The jQuery after() method inserts content AFTER the selected HTML elements.

The jQuery before() method inserts content BEFORE the selected HTML elements.

Example

$("img").after("Some text after");

$("img").before("Some text before");

Try it Yourself »

Add Several New Elements With after() and before()

Also, both the after() and before() methods can take an infinite number of new elements as parameters. The new elements can be generated with text/HTML (like we have done in the example above), with jQuery, or with JavaScript code and DOM elements.

In the following example, we create several new elements. The elements are created with text/HTML, jQuery, and JavaScript/DOM. Then we insert the new elements to the text with the after() method (this would have worked for before() too) :

Example

function afterText() {
 var txt1 = "I "; // Create element with HTML
 var txt2 = $("").text("love "); // Create with jQuery
 var txt3 = document.createElement("b"); // Create with DOM
 txt3.innerHTML = "jQuery!";
 $("img").after(txt1, txt2, txt3); // Insert new elements after <img>
}

Try it Yourself »

jQuery Exercises

Test Yourself With Exercises

Exercise:

Use a jQuery method to insert the text "YES!" at the end of a element.

Start the Exercise

jQuery HTML Reference

For a complete overview of all jQuery HTML methods, please go to our jQuery HTML/CSS Reference.

Today, we’re going to look at four different techniques you can use to get and set text and HTML in DOM elements.

Let’s dig in!

The Element.innerHTML property

You can use the Element.innerHTML property to get and set the HTML content inside an element as a string.

<div class="greeting">
	<p>Hello world!</p>
</div>

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

Here’s a demo of the Element.innerHTML property.

The Element.outerHTML property

You can use the Element.outerHTML property to get and set the HTML content including an element. This works the same as Element.innerHTML, but includes the element itself when getting and updating HTML content.

<div class="greeting">
	<p>Hello world!</p>
</div>

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<div class="greeting"><p>Hello world!</p></div>"
let html = greeting.outerHTML;

// Set HTML content
// This completely replaces the <div class="greeting"></div> element and all of its content
greeting.outerHTML = '<p class="outro">Goodbye, friend! <a href="exit.html">Click here to leave.</a>';

// Add HTML after the element (and outside of it)
greeting.outerHTML += ' Add this after what is already there.';

// Add HTML before the element (and outside of it)
greeting.outerHTML = 'We can add this to the beginning. ' + greeting.innerHTML;

Here’s a demo of the Element.outerHTML property.

The Node.textContent property

You can use the Node.textContent property to get and set the text of an element (and omit the markup) as a string.

In the example below, you may notice that the Node.textContent property gets all of the text content, including CSS properties inside of a style element and hidden UI elements.

Any HTML elements included in a string when setting content with the Node.textContent property are automatically encoded and rendered as-is.

<div class="greeting">
	<style type="text/css">
		p {
			color: rebeccapurple;
		}
	</style>
	<p hidden>This is not rendered.</p>
	<p>Hello world!</p>
</div>

let greeting = document.querySelector('.greeting');

// Get text content
// returns "p {color: rebeccapurple;} This is not rendered. Hello world!"
let text = greeting.textContent;

// Set text content
// This completely replaces whats there, including any HTML elements
greeting.textContent = 'We can dynamically change the content.';

// Add text to the end of an element's existing content
greeting.textContent += ' Add this after what is already there.';

// Add text to the beginning of an element's existing content
greeting.textContent = 'We can add this to the beginning. ' + greeting.textContent;

// HTML elements are automatically encoded and rendered as-is
greeting.textContent = '<p>See you later!</p>';

Here’s a demo of the Node.textContent property.

The Element.innerText property

The Element.innerText property gets and sets the rendered text of an element (and omits the markup).

Unlike the Node.textContent property, the Element.innerText property returns only rendered text, similar to what a user would be able to select with their cursor or the keyboard when highlighting text.

Like Node.textContent, any HTML elements included in a string when setting content are automatically encoded and rendered as-is.

<div class="greeting">
	<style type="text/css">
		p {
			color: rebeccapurple;
		}
	</style>
	<p hidden>This is not rendered.</p>
	<p>Hello world!</p>
</div>

let elem = document.querySelector('.greeting');

// Get text content
// returns "Hello world!"
let text = elem.innerText;

// Set text content
// This completely replaces whats there, including any HTML elements
elem.innerText = 'We can dynamically change the content.';

// Add text to the end of an element's existing content
elem.innerText += ' Add this after what is already there.';

// Add text to the beginning of an element's existing content
elem.innerText = 'We can add this to the beginning. ' + elem.innerText;

// HTML elements are automatically encoded and rendered as-is
elem.innerText = '<p>See you later!</p>';