JSFiddle - React, Tailwind, and code Playground
HTML
<div id="holder">
Original Content
</div>
<p>
<button id="btn_1">Overwrite textContent</button>
<button id="btn_2">Append to textContent</button>
<button id="btn_3">Append to innerHTML</button>
<button id="btn_4">Append using jQuery</button>
</p>
JavaScript
document.getElementById("btn_1").addEventListener("click", function() {
document.getElementById("holder").textContent = "Hello World";
}, false);
document.getElementById("btn_2").addEventListener("click", function() {
document.getElementById("holder").textContent += " - <b>hello</b> Later, he said Hello World - ";
}, false);
document.getElementById("btn_3").addEventListener("click", function() {
document.getElementById("holder").innerHTML += "<p>Hello World</p>";
}, false);
document.getElementById("btn_4").addEventListener("click", function() {
var code_to_insert = $("<p>Hello World</p>");
$("#holder").append(code_to_insert);
}, false);