K

14

1195

How could I achieve the following:

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

Using jQuery where regTitle is my div id?

Korte answered 20/8, 2009 at 23:51 Comment(1)

Funny how people still grasp on to vanilla js even when you ask for the answer in jquery... – Toffeenosed 22/6, 2023 at 8:2

L

1798

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

Lenna answered 20/8, 2009 at 23:52 Comment(0)

F

355

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');

Froebel answered 20/8, 2009 at 23:52 Comment(3)

" but keep the html structure" . can you explain? – Tandem 18/9, 2015 at 12:33

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 #1911294, jQuery.html() treats the string as HTML, jQuery.text() treats the content as text. – Olga 14/1, 2016 at 14:4

@AnoopJoshi #1911294 – Tanny 31/3, 2017 at 18:29

D

86

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);

Dancer answered 11/8, 2011 at 10:34 Comment(3)

Good place to use itemtoReplaceContentOf.empty(); – Rodl 8/9, 2011 at 20:51

Is newcontent is a jQuery object? This isn't clear. – Vintager 24/8, 2017 at 13:25

@Vintager 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 – Dancer 29/8, 2017 at 3:17

E

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();

Enzootic answered 27/11, 2013 at 8:3 Comment(0)

H

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'.

Header answered 22/6, 2016 at 2:37 Comment(0)

S

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);
    });
}

Swig answered 7/9, 2016 at 16:41 Comment(0)

L

12

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

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

OR

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

Laryngotomy answered 3/2, 2017 at 6:15 Comment(0)

P

12

Example

$( 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>

Papaw answered 17/3, 2017 at 5:36 Comment(0)

S

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");

Soften answered 16/10, 2014 at 12:14 Comment(1)

The open and close parenthesis after html saved me. So remember folks those two are important. – Glosso 1/12, 2016 at 1:3

N

6

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

Nettlesome answered 21/9, 2017 at 12:26 Comment(0)

B

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>

Bathyal answered 12/6, 2020 at 8:51 Comment(0)

A

4

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.

Armijo answered 21/1, 2018 at 15:37 Comment(0)

F

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...

Flaxseed answered 31/1, 2019 at 11:38 Comment(0)

S

1

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

Stockton answered 22/6, 2021 at 9:52 Comment(1)

the question is regarding JQUERY - NOT - Javascript! – Mob 7/2, 2022 at 0:7

Use animation to change Inner HTML

Pure JS and Shortest

Recommended topics

Hot tags