[Solved-5 Solutions] innerHTML of a div using jQuery - javascript tutorial



Problem:

How to replace innerHTML of a div using jQuery ?

Solution 1:

To replace innerHTML of a div in jQuery, We can use the html() or text() method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#button1").click(function(){   
       $('#demo').html('Wikitechy Tutorials!!!');
   });
});
</script>
</head>
<body>

<div id="demo">Welcome to Wikitechy</b>!
</div><br>
<button id="button1">Replace</button>
</body>
</html>

Solution 2:

Using .innerHTML property are effectively modifying the strings.

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

Here change the value of specified elements by using text() function.

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

Solution 3:

In jquery, reset the existing content and append the new one.

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

or

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

Read Also

jQuery - Get html

Solution 4:

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

Solution 5:

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

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


Related Searches to javascript tutorial - innerHTML of a div using jQuery