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