How to replace innerHTML of a div?

Question

How could I achieve the following:

document.all.regTitle.innerHTML = 'Hello World';

Using jQuery where regTitle is my div id?

Funny how people still grasp on to vanilla js even when you ask for the answer in jquery... — Hayden Thring
– Hayden Thring, Commented Jun 22, 2023 at 8:02

Zed · Accepted Answer · 2009-08-20 23:58:14Z

1811

$("#regTitle").html("Hello World");

edited Aug 20, 2009 at 23:58

answered Aug 20, 2009 at 23:52

Zed

57.8k9 gold badges79 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

undefined · Accepted Answer · 2013-11-27 11:52:33Z

358

The html() function can take strings of HTML, and will effectively modify the .innerHTML property.

$('#regTitle').html('Hello World');

However, the text() function will change the (text) value of the specified element, but keep the html structure.

$('#regTitle').text('Hello world');

edited Nov 27, 2013 at 11:52

undefined

9,8579 gold badges62 silver badges88 bronze badges

answered Aug 20, 2009 at 23:52

zombat

94.5k25 gold badges158 silver badges165 bronze badges

3 Comments

Anoop Joshi P Over a year ago

" but keep the html structure" . can you explain?

Gorgsenegger Over a year ago

From the jQuery API documentation (api.jquery.com/text), text() is different as: Unlike the .html() method, .text() can be used in both XML and HTML documents.. Furthermore, according to stackoverflow.com/questions/1910794/…, jQuery.html() treats the string as HTML, jQuery.text() treats the content as text.

Machavity Over a year ago

@AnoopJoshi stackoverflow.com/questions/1910794/…

HoldOffHunger · Accepted Answer · 2020-07-20 18:13:03Z

89

If you instead have a jQuery object you want to render instead of the existing content: Then just reset the content and append the new.

var itemtoReplaceContentOf = $('#regTitle');
itemtoReplaceContentOf.html('');
newcontent.appendTo(itemtoReplaceContentOf);

Or:

$('#regTitle').empty().append(newcontent);

edited Jul 20, 2020 at 18:13

HoldOffHunger

21.3k11 gold badges123 silver badges147 bronze badges

answered Aug 11, 2011 at 10:34

Cine

4,43930 silver badges50 bronze badges

3 Comments

Kevin Panko Over a year ago

Good place to use itemtoReplaceContentOf.empty();

kmoser Over a year ago

Is newcontent is a jQuery object? This isn't clear.

Cine Over a year ago

@kmoser In the first example, newcontent is indeed a jquery object. In the second example it can be of type htmlString or Element or Text or Array or jQuery as per api.jquery.com/append

dane · Accepted Answer · 2013-11-27 08:03:08Z

29

Here is your answer:

//This is the setter of the innerHTML property in jQuery
$('#regTitle').html('Hello World');

//This is the getter of the innerHTML property in jQuery
var helloWorld = $('#regTitle').html();

answered Nov 27, 2013 at 8:03

dane

6296 silver badges16 bronze badges

Comments

Webeng · Accepted Answer · 2016-06-22 02:37:03Z

15

Answer:

$("#regTitle").html('Hello World');

Explanation:

$ is equivalent to jQuery. Both represent the same object in the jQuery library. The "#regTitle" inside the parenthesis is called the selector which is used by the jQuery library to identify which element(s) of the html DOM (Document Object Model) you want to apply code to. The # before regTitle is telling jQuery that regTitle is the id of an element inside the DOM.

From there, the dot notation is used to call the html function which replaces the inner html with whatever parameter you place in-between the parenthesis, which in this case is 'Hello World'.

answered Jun 22, 2016 at 2:37

Webeng

7,0984 gold badges38 silver badges61 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

15

There are already answers which give how to change Inner HTML of element.

But I would suggest, you should use some animation like Fade Out/ Fade In to change HTML which gives good effect of changed HTML rather instantly changing inner HTML.

Use animation to change Inner HTML

$('#regTitle').fadeOut(500, function() {
    $(this).html('Hello World!').fadeIn(500);
});

If you have many functions which need this, then you can call common function which changes inner Html.

function changeInnerHtml(elementPath, newText){
    $(elementPath).fadeOut(500, function() {
        $(this).html(newText).fadeIn(500);
    });
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 7, 2016 at 16:41

Somnath Muluk

58.3k39 gold badges225 silver badges230 bronze badges

Comments

Nikit Barochiya · Accepted Answer · 2025-04-23 06:37:36Z

13

Example

You can use .html() in jQuery to replace the inner HTML of a div. In this example, once the document is ready, the content inside the .msg div is updated to "hello world".

✅ Simple and effective for updating dynamic content.

📌 .html() replaces the entire inner content. If you just want to update text (without HTML tags), consider using .text() instead.

$( document ).ready(function() {
  $('.msg').html('hello world');
});

    <!DOCTYPE html>
    <html>
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>    
      </head>
      <body>
        <div class="msg"></div>
      </body>
    </html>

edited Apr 23 at 6:37

answered Mar 17, 2017 at 5:36

Nikit Barochiya

1,18512 silver badges15 bronze badges

Comments

jitendra varshney · Accepted Answer · 2017-02-03 06:15:43Z

12

you can use either html or text function in jquery to achieve it

$("#regTitle").html("hello world");

OR

$("#regTitle").text("hello world");

answered Feb 3, 2017 at 6:15

jitendra varshney

3,5622 gold badges26 silver badges32 bronze badges

Comments

Glen Selle · Accepted Answer · 2015-10-28 19:32:25Z

11

jQuery's .html() can be used for setting and getting the contents of matched non empty elements (innerHTML).

var contents = $(element).html();
$(element).html("insert content into element");

edited Oct 28, 2015 at 19:32

Glen Selle

3,9564 gold badges39 silver badges59 bronze badges

answered Oct 16, 2014 at 12:14

Pratik

3072 silver badges9 bronze badges

1 Comment

Gellie Ann Over a year ago

The open and close parenthesis after html saved me. So remember folks those two are important.

Miriam Farber · Accepted Answer · 2017-09-21 12:30:32Z

6

$("#regTitle")[0].innerHTML = 'Hello World';

edited Sep 21, 2017 at 12:30

Miriam Farber

19.7k15 gold badges66 silver badges78 bronze badges

answered Sep 21, 2017 at 12:26

Al.UrBasebelon Tomeh

3013 silver badges9 bronze badges

Comments

Kamil Kiełczewski · Accepted Answer · 2020-06-12 09:34:01Z

6

Pure JS and Shortest

Pure JS

regTitle.innerHTML = 'Hello World'

regTitle.innerHTML = 'Hello World';

<div id="regTitle"></div>

Shortest

$(regTitle).html('Hello World');

// note: no quotes around regTitle
$(regTitle).html('Hello World');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="regTitle"></div>

edited Jun 12, 2020 at 9:34

answered Jun 12, 2020 at 8:51

Kamil Kiełczewski

93.8k34 gold badges401 silver badges375 bronze badges

Comments

Pavel Donchev · Accepted Answer · 2018-01-21 15:37:17Z

Just to add some performance insights.

A few years ago I had a project, where we had issues trying to set a large HTML / Text to various HTML elements.

It appeared, that "recreating" the element and injecting it to the DOM was way faster than any of the suggested methods to update the DOM content.

So something like:

var text = "very big content";
$("#regTitle").remove();
$("<div id='regTitle'>" + text + "</div>").appendTo("body");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Should get you a better performance. I haven't recently tried to measure that (browsers should be clever these days), but if you're looking for performance it may help.

The downside is that you will have more work to keep the DOM and the references in your scripts pointing to the right object.

Alireza · Accepted Answer · 2019-01-31 11:38:27Z

3

jQuery has few functions which work with text, if you use text() one, it will do the job for you:

$("#regTitle").text("Hello World");

Also, you can use html() instead, if you have any html tag...

answered Jan 31, 2019 at 11:38

Alireza

105k27 gold badges280 silver badges173 bronze badges

Comments

aryan vishwakarma · Accepted Answer · 2021-06-22 09:52:00Z

2

var abc = document.getElementById("regTitle");
abc.innerHTML = "Hello World";

answered Jun 22, 2021 at 9:52

aryan vishwakarma

777 bronze badges

1 Comment

TV-C-1-5 Over a year ago

the question is regarding JQUERY - NOT - Javascript!

Collectives™ on Stack Overflow

How to replace innerHTML of a div?

14 Answers 14

Comments

3 Comments

3 Comments

Comments

Comments

Use animation to change Inner HTML

Comments

Comments

Comments

1 Comment

Comments

Pure JS and Shortest

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

Comments

3 Comments

3 Comments

Comments

Comments

Use animation to change Inner HTML

Comments

Comments

Comments

1 Comment

Comments

Pure JS and Shortest

Comments

Comments

Comments

1 Comment

Linked

Related