I created a unique quotes generator application by combining vanilla JS, AJAX, and DOM manipulation. I'm now curious if it's possible to shift the JS functionalities to the backend using Node/Express. However, I can't quite determine if DOM manipulation, such as generating a new quote upon button click, can be achieved with Node.js?
One way to convert HTML into a DOM structure using Node.js is by utilizing libraries like libxmljs or cheerio. These tools enable you to modify the resulting document as needed.
It's important to note that while Node.js can manipulate its own DOM, it cannot directly interact with a browser-rendered DOM or handle events like button clicks within the browser environment. This is because the browser and its associated DOM are separate from the Node.js program.
The DOM is a fundamental part of HTML, not JavaScript. It relies on the browser environment to function properly.
To effectively manipulate the DOM, you should perform those actions in the browser and send API requests to your server-side logic. Utilizing tools like the fetch API can help facilitate communication between the backend and frontend, allowing you to update the DOM based on the retrieved data.
One option is to incorporate a template rendering language, such as ejs or handlebars, into your vanilla javascript code.
Template engines offer various ways to manipulate templates for server-side rendering of your webpage. This allows you to serve HTML content and modify the DOM before sending it to the client.
In the world of web development, Node/Express serves as a powerful backend tool while your browser, where vanilla JS operates, functions as the front end.
The backend has the capability to generate output in various formats such as HTML, JSON, XML, or plain text. However, similar to how we cannot alter the value returned by a function, once the backend produces something, it cannot be changed.
On the other hand, frontend tools like vanilla JS are utilized to manipulate the DOM dynamically.
One approach is to retrieve a new resource entirely from the backend. Alternatively, a more efficient method would be to fetch only the specific data you need to modify by establishing a REST API on the same backend.
For instance, you might create a route like /page/quotes that delivers an HTML page and another route like /api/random_quote that provides a random quote in JSON format. This can be accessed from frontend JS using methods like fetch
It's essential to distinguish between DOM and nodes right from the start.
Refers to running code in a browser, requiring three types of files:
Node is a programming language and tool that resembles JavaScript, but cannot be executed in a browser. However, you can use Node to create html/css/js files and serve them using server frameworks like Express.
If you want to write code using Node Express and manipulate the DOM, consider the following:
I am currently using a sticky transparent header on my website www.obviagency.com Here is the CSS code: #site-header-inner { height:0px; z-index:170; margin:0 auto; width:100%; position:fixed; top:0; margin-top:10px; } I would like to change the backgr ...
In my Angular (with Ionic) app, I have this code snippet: my_app.factory('connectivityInterceptorService', ['$q', '$rootScope', function ($q, $rootScope) { var connectivityInterceptorServiceFactory = {}; var _request ...
I'm experiencing some issues with jQuery and AJAX. I have 2 functions that perform AJAX calls: Function 1: getSelectedRoom($chosenRoom) and Function 2: getDeviceTable("all", "div#DeviceTables",0,1,1,0,1,$chosenRoom) The first func ...
Every time I attempt to place pins on the map, I encounter the "google is not defined" error. The map itself displays without any issues until I add the lines following the initMap() function. I have come across similar posts but none of the suggested so ...
I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...
<html><head></head> <body><script> function calculateGreatestCommonDivisor(a, b) { if (a == 0) { return b; } return calculateGreatestCommonDivisor(b % a, a); } function getDifference(array) { for ( ...
I need help with modifying the HTML output of my CList view when there is pagination present. Currently, it displays: Showing 1-3 out of 5 items. However, I want to remove this message from the top of the pagination. Can someone guide me on how to achie ...
Requesting assistance on displaying JSON values in a JQuery table with corresponding image icons. The JSON values include "Success", "Failed", and "Aborted" which should be represented by image icons named Success.png, Failed.png, and Aborted.png. Any guid ...
How can I make a page redirection based on the selected option value from a bootstrap select? Here is the HTML code: <select class="selectpicker"> <option value="https://example.com/">Home</option> <option value="https://exam ...
I am currently facing an issue with my code where I am attempting to set up a wrapper element as a grid. However, upon inspecting the page, I am receiving notifications that my inputs for display, grid-template-columns, and grid-template-area are considere ...
When I call the contacts function from the main return, everything seems fine. However, I encounter an error at this point: const showContacts = React.useCallback( (data: UsersQueryHookResult) => { if (data) { return ( < ...
My current project requires me to downgrade due to certain third-party packages not being updated for the latest version of react-native. Specifically, I am using Xcode 9.0. Despite my efforts to downgrade the react-native version, I encountered the follo ...
For my project, I have a lot of content in the success function of AJAX. I plan to move this content to a file called textcsc.js and use the include() method in AJAX. Initially, the code was working successfully: $(document).ready(function() { $(&apo ...
$(document).ready(function () { var imgixOptions = { updateOnResizeDown : true, updateOnPinchZoom : true, fitImgTagToContainerWidth: true, fitImgTagToContainerHeight: true, autoInsertCSSBestPractices: true, ...
I have been experimenting with creating a Word document using HTML code. Thanks to various examples, I have made some progress. However, I am facing an issue where I cannot get the total number of pages to display as text on the first page of the document. ...
I'm struggling to find the proper location within the w.globals object to display the x-axis value, which is a datetime, in the tooltip of the datapoint. var chartOptions = { ... xaxis: { type: "datetime" }, tooltip: { x: { format: " ...
Can you help me determine which approach would be more efficient - using native functions of the language that involve 2 iterations or a simple for loop? The goal is to locate the index in an array of objects where the property filterId matches a specific ...
In order to showcase various countries, I utilized ListItem in my Country.js file. For a visual representation of this setup, check out the CodeSandbox link I have provided: My Code One functionality I am aiming for is having the program remember the sel ...
I'm encountering an issue when trying to establish a connection to my database using mongoose and authentication. The error message that I receive is as follows: 01-11-2020 08:47:18 error: uncaughtException: Error creating index: command createIndexes ...
I am currently working on implementing a placeholder for displaying blog posts in an EJS file... When there are items in the database, everything works properly. However, I am facing issues with setting up an if/else statement. Here's my current code ...