Make web page content editable live in JavaScript

In this JavaScript tutorial, I have come with a cool feature of JavaScript. I hope, you must aware of something like front end edit. For example, you will find WPBakery Page Builder plugin, DIVI theme for WordPress allow you to edit from front end design to make you aware of the looks of your site during editing it.

Now, you may wonder, how it is possible to edit a web page in real time from the front end.

Off-course, it is possible. Here in this tutorial, I am going to tell you how to make web page content editable live in JavaScript.



Live web page edit in JavaScript is always going to be interesting. With just one line of code, you can make an element of the web page or even the whole web page editable in real time.

For example, if you want to make all the content inside the body tag, then below is the JavaScript code that will do the task:

document.body.contentEditable='true';

That’s it. This one line code will be able to let your web page editable live from the front end.

In our code, we have actually used the contentEditable HTML DOM property for our task. It sets or returns if the content of our element be editable or not.

Now, suppose, you want to make a particular div element of your web page editable which has a div ID “main”. Then, below is the javaScript program to make the element of the web page editable:

document.getElementById('main').contentEditable='true';

This is fundamental to make any web page editable keeping the design as it is. Now using AJAX, you can save the modification using a server-side language in the backend for dynamic content of your website.

 

Also, read:

 

Leave a Reply

Your email address will not be published. Required fields are marked *