I need to create a project for my university and the teachers have forbidden the use of inner.HTML for some reason. I tried using the solution on this question, but it isn't doing anything for me.
Is there a way to change text within an HTML page through DOM manipulation without using inner.HTML?
Edit: Just like the guy in the ther question, I don't want to just add text but rather change text that is already on the page.
You could use a Javascript library for this, such as Knockout or React.
The example from Knockout's page would work great(https://knockoutjs.com/examples/helloWorld.html):
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
// Here's my data model
var ViewModel = function(first, last) {
this.firstName = ko.observable(first);
this.lastName = ko.observable(last);
this.fullName = ko.pureComputed(function() {
// Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
return this.firstName() + " " + this.lastName();
}, this);
};
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work