I am developing a web server with node.js. But I got a problem just now. Below code is my HTML code.
<%
var tagID = 'something';
%>
<a href="..." id="javascript:tagID">...</a>
I know that if I use 'javascript:' inside a HTML tag. then it can execute javascript code. but it did not work when I checked it on my browser.
Or should I use DOM to do this?
You can use javascript: in a href. Like so
<a href="javascript:alert('hello')">Hi</a>
There are 3 ways to do what you are asking:
Using a single page application like angular, reacts ...
Use your own custom design pattern that will replace whatever you want to replace
var global = this;
global.id1 = 10;
global.id2 = 30;
document.querySelectorAll("*").forEach(function(dom) {
[...dom.attributes].forEach(function(attr) {
if (attr.value.startsWith("javascript:")) {
dom.setAttribute(attr.name, global[attr.value.replace("javascript:", "")]);
}
});
});<div id="javascript:id1">Div 1</div>
<div id="javascript:id2">Div 2</div>document.getElementById("1").id = "10";
document.getElementById("2").id = "20";<div id="1">Div 1</div>
<div id="2">Div 2</div>If you are creating a big app then I would reccomand using a single page application (though it might take some time getting to know how it works if you are familiar with it).
If you are feeling adventurous or don't want to bother learning or using an SPA you could create your own framework/design pattern.
If the example you have shown is not a common occurence (and you don't expect it to be more common in the future), easiest solution would be to just manually update the dom.
You can use https://www.npmjs.com/package/ejs
// server.js
// load the things we need
var express = require('express');
var app = express();
// set the view engine to ejs
app.set('view engine', 'ejs');
// use res.render to load up an ejs view file
// index page
app.get('/', function(req, res) {
res.render('pages/index');
});
// about page
app.get('/about', function(req, res) {
res.render('pages/about');
});
app.listen(8080);
console.log('8080 is the magic port');
you can embed javascript like this
<ul>
<% drinks.forEach(function(drink) { %>
<li><%= drink.name %> - <%= drink.drunkness %></li>
<% }); %>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<% include ../partials/head %>
</head>
<body class="container">
<header>
<% include ../partials/header %>
</header>
<main>
<div class="jumbotron">
<h1>This is great</h1>
<p>Welcome to templating using EJS</p>
</div>
</main>
<footer>
<% include ../partials/footer %>
</footer>
</body>
</html>
javascript:...inside event handlers e.g.<a href="..." onclick="javascript:alert(tagID)">...</a>if you are trying to set the tags ID attribute this way, it isn't going to work. Perhaps you should state what you are trying to do, there may be a better way.