在ejs模板中包含.js文件以操作DOM不起作用

的原因是ejs模板是在服务器端渲染的，而.js文件是在客户端执行的。由于ejs模板在服务器端渲染完成后会生成静态的HTML页面发送给客户端，所以客户端无法直接执行.js文件中的代码。

解决这个问题的方法是将需要操作DOM的代码放在客户端执行的<script>标签中，而不是通过包含外部的.js文件。可以在ejs模板中直接编写<script>标签，将需要操作DOM的代码写在其中。这样在浏览器渲染页面时，会执行<script>标签中的代码，从而实现对DOM的操作。

以下是一个示例：

<!DOCTYPE html>
<html>
<head>
  <title>EJS Template</title>
</head>
<body>
  <h1>Hello, <%= name %>!</h1>

  <script>
    // 在这里编写需要操作DOM的代码
    document.querySelector('h1').style.color = 'red';
  </script>
</body>
</html>

在上面的示例中，<%= name %> 是一个ejs模板的变量，可以根据实际情况替换为需要的内容。在<script>标签中，使用JavaScript代码来获取h1元素并修改其样式，将文字颜色设置为红色。

需要注意的是，ejs模板中的JavaScript代码只能操作当前页面的DOM，无法直接操作其他页面或跨域的内容。如果需要跨域操作DOM，可以通过Ajax等方式进行通信。

推荐的腾讯云相关产品：腾讯云云服务器（https://cloud.tencent.com/product/cvm）和腾讯云云函数（https://cloud.tencent.com/product/scf）可以提供服务器运维和云原生的支持。

相关·内容

js操作DOM在父元素中的结尾添加子节点注意

impressionHtml=``; document.getElementById("wrapper").appendChild(impressionHtml); js...向父元素wrapper中的末尾添加定义好的html，报错： Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter...在stackoverflow上找到很好的一个解释： ? 所以js是不能直接传入字符串的，但是jquery的append可以直接传入html字符串。

9.8K4 0

Web前端模板引擎之字符串模板

一、前言 Web前端领域里用到的模板引擎技术主要有三种，它们分别是：基于字符串的模板基于Dom操作的模板基于虚拟Dom的模板本文着重介绍基于字符串的模板引擎的实现原理，分析它的优点缺点以及使用的场景...二、石器时代进入正文之前，我们先回顾一下在模板引擎出现之前，暂且称之为“石器时代”，我们是如何利用JS改变页面结构的。...这些模板又可以细分为2类：一种是不包含逻辑处理，只作数据绑定用的，如mustache.js；另一种是既有逻辑处理，也有数据绑定的，如EJS。下面，我以EJS的语法为例，实现一个简单的字符串模板引擎。...> 在‘’之间是JS的表达式，而在‘‘之间是普通的JS语句，可以进行逻辑判断和条件循环等操作。...反之，更先进的基于Dom或者虚拟Dom操作的模板引擎可能是更好的选择。

1.3K2 0

技术干货丨Web前端字符串模板浅析

石器时代在进入正文之前，我们先回顾一下在模板引擎出现之前的时代，我们暂且称之为“石器时代”，我们是如何利用JS改变页面结构的。...这些模板又可以细分为两种情况：一种是不包含逻辑处理，只作数据绑定用的，如 mustache.js ；另一种是既有逻辑处理，也有数据绑定的，如 EJS 。...下面，我以 EJS 的语法为例，实现一个简单的字符串模板引擎。模版引擎的编译流程如下：首先，需要编译模板字符串，将其转换为 JS 能够理解的语法。.../li> 在‘’之间是 JS 的表达式，而在‘‘之间是普通的 JS 语句，可以进行逻辑判断和条件循环等操作。...反之，更先进的基于Dom 或者虚拟 Dom 操作的模板引擎可能是更好的选择。

6812 0

node.js 第三方模块

web express web开发框架 ejs 页面模板。可以方便的把html改写成ejs。 eco 页面模板,类似ejs。...与ejs的不同点是：逻辑部分用CoffeeScript而不是javascript jade 页面模板源自ruby的haml 比ejs优雅简洁，但把html转换成jade要花一番功夫。...coffeecup 页面模板风格有些像 jade,但里面的内容各种用coffee。 Mongoskin mongoDB驱动。是在mongodb-native的基础上做的封装。...如文件读写，数据库操作等 promise 同上测试 mocha 测试框架,断言库可自由选择。...可读性很强，在should.js基础上构建。

1.8K3 0

教你如何在React及Redux项目中进行服务端渲染

然后在Node环境中返回，比如在Express框架中，返回渲染一个模板文件　　　　 res.render('messageClient/message.html', { appHtml...需要注意的是这里的ejs模板进行了自定义分隔符，因为webpack在进行编译时，HtmlWebpackPlugin 插件中自带的ejs处理器可能会和这个模板中的ejs变量冲突在express中自定义即可...// 自定义ejs模板 app.engine('html', ejs....__express); app.set('view engine', 'html'); ejs.delimiter = '|'; 接下来，在浏览器环境的组件中（以下这个文件为公共文件，浏览器端和服务器端共用...id=css' ] } 在Express的服务器框架中，messageSSR 路由渲染页面之前做一些异步操作获取数据 // 编译后的文件路径 let distPath

3K1 0

【译】使用 Webpack 和 Poi 构建更好的 JavaScript 应用

如果你将 index.js 放置在其他文件夹，比如 src，那你需要执行命令 poi src/index.js 来在开发服务器上启动该文件。...在项目目录中新建一个名为 index.ejs 的新文件，其代码如下： <!...这里将使用上一节已经创建的 index.ejs 文件。...在 Poi 中编译样式在使用 Poi 构建的 React 应用中引入 CSS 样式十分简单。在项目目录下创建一个 .css 文件然后在 .js 文件中编写引入声明即可。...经过以上处理后，在 index.js 中引入 markdown 页面并且在渲染函数中将其以 React 组件的形式调用。

1.3K4 0

webpack学习简单总结

js,一些想放到头部，一些像放到body中，就可以直接在页面中以模板引擎的方式引入js了。...:100%;height:100%"> 模板文件处理测试然后再对应的js中import导入该html文件， import tpl from '.....中导入该js文件，最后在App.js中渲染到index.html中 import Layer from '....，安装ejs-loader 后缀格式可以是.tpl/.ejs 当引入tpl的模板文件的时候，返回的不是一个字符串，是一个function webpack配置： { test:/\.ejs$/,...在模版引擎文件中，src可以以require(“相对路径”) 的形式引入，就可以成功引入，但是直接引用相对地址就不可以解析。

1.3K6 0

React进阶篇（七）React 同构

唯一的方式就是让浏览器去拉取JS文件执行，让JS代码来控制。更详细的步骤如下：下面，我们基于KOA框架讲解如何做同构？...第一步：在服务端构建初始 store 扩充 Koa 的路由文件： // server-side ....模板引擎 }); }); export default router; 第二步：模板引擎将初始的 store 渲染到页面中模板引擎将 koa router 传来的 store 数据赋值给 window...-- index.ejs --> ; 第三步：客户端获取

1.1K2 0

Webpack+vue+boostrap+ejs构建Web版GM工具

上面的Tab和下面的内容还有处理逻辑的函数都分了三大块，在不同的位置。在内容持续增加以后，全都写在一个html里太不方便了，而如果走ajax加载，调试和本地编辑都挺麻烦。...我的GM工具中使用Vue做模板引擎，前面有提到Vue模板引擎的支持。...// new VueLoaderPlugin() //开 .vue 支持的话加这一行 ] } HTML模板引擎和ejs webpack 默认是对js打包的，但是如果能在编译期对html打包才能满足我们...其实有很多模板引擎增加了对 webpack 的支持，而我之前用过一些 ejs ，比较轻量级，功能也足够，所以我还是用了 ejs 作为模板系统。...我们GM工具最终的 webpack.config.js 文件如下: const webpack = require('webpack'); const HtmlWebpackPlugin = require

2.7K3 2

EJS模板在express中的使用攻略及应用实例（建议收藏）

---- 三、以文件形式使用模板在上个例子中，我们将模板放到变量template中，数据量少的话还可以，倘若数据量比较大的话，将是一件十分恐怖的事情。...所以我们可以将模板放到文件中，现在对以上示例进行改造。 1、创建views文件夹 2、在views文件夹内创建one.ejs模板文件: <!...比如，我们要将模板文件放置到html文件夹内： 1、创建html文件夹 2、将上个示例中的one.ejs移入html文件夹内 3、上示例中的demo.js添加如下代码： // 设置模板文件夹为htmlapp.set..._%> 将结束标签后面的空格符删除十、include 通过 include 指令将相对于模板路径中的模板片段包含进来。.../views/footer.ejs" 两个模板文件,我们可以通过以下代码将模板文件包含进来：如果需要传值，

4.7K2 1

Express进阶升级

：初始化项目结构： npm i -y #npm构建项目 npm i ejs #npm安装EJS库 01EJS初体验.JS： EJS本质是对模板字符串的拼接，提供比原始操作具有更高效的方式使用 ejs.render..., title, xiyou}); console.log(result); /views/index.ejs：文件后缀 .ejs 用于标识这是一个 EJS模板文件，开发者在项目中可以轻松识别和区分模板文件...#routes 目录包含路由文件 │ ├── index.js #这里，你可以定义应用的不同路由和对应的处理函数 │ └── users.js └── views #views 目录用于存放视图模板文件...还是有点无从下手经过上述文件分析，我们大致了解如何定义自己的路由规则了： /routes 中定义路由文件——>并配置在app.JS中进行引用、暴漏 /views 中定义ejs等模板资源——>app.JS...、操作lowdb存取数据最后：通过app.JS 文件管理配置路由封装暴漏路由请求API，如下是核心的routes中的文件： //01_lowdbAPI: //导入Express配置 var express

2421 0

73个强无敌的NPM软件包

配置模块 24.Config 对存储在应用程序中的配置文件进行设置，可以通过环境变量、命令行参数或外部源进行覆盖及扩展。...模板语言 29.Mustache Mustache 是一种无逻辑模板语法，适用于 HTML、配置文件以及源代码等几乎一切场景。它通过使用哈希或对象中提供的值，在模板内扩展标签。...项目链接： https://www.npmjs.com/package/handlebars 31.EJS EJS 是一种简单的模板语言，允许您通过简单语法、快速执行与简单调试等便捷优势生成以 JavaScript...系统模块 65.Fs-extra Fs-extra 包含经典 Node.js fs 包中未提供的多种方法，例如 copy(),remove(),mkdirs() 等。...项目链接： https://www.npmjs.com/package/fs-extra 66.Node-dir 用于各类常见目录及文件操作的模块，包括获取文件数组、子目录以及对文件内容进行读取 /

4.4K1 0

深入探讨 Web 开发中的预渲染和 Hydration

我们使用像Node.js、PHP、Java和Ruby on Rails这样的服务器端语言。在我们的服务器中，我们使用像JSP和EJS这样的模板语言创建了视图。...例如，如果我们试图验证表单字段，我们就必须在 EJS 文件和您的 API 端点中都进行验证。...让我们看一下下面的代码片段，以了解这种重复逻辑的一个示例： EJS 中的代码： <label...React 使我们能够创建快速的应用程序，并且比 DOM 操作方法更易于简化用户界面的更新。...然后，React 使用其差异算法将新的虚拟 DOM 与之前的虚拟 DOM 进行比较，以检查是否有变化。这就是Reconciliation。

1261 0

hexo配置自己的博客站点

显示列表 category.ejs 分类显示页 tag.ejs 标签页 hexo的模板解析，以layout.ejs为入口，所有静态页面（如：文章、页面、首页、标签、归档、分类等）都会以layout.ejs...此文件夹下的.js文件，作为hexo插件的一种扩展存在，在编译过程中起作用 source 此文件下的文件或文件夹，在编译过程中会保持不变，供开发者使用 languages 多语言包 _config.yml...针对当前模板的配置文件，配置文件中的信息可以被ejs模板访问说明： 1....插件需要入在node_moduels文件夹下，必须有.js和.package.json文件（也就是一个标准npm包即可）. js文件： 'use strict' console.log('hexo-filter-list...本示例的下载包中不包含node_modules，需要手动放将hexo-filter-list放在node_moduels中 3.

8977 0

【译】73个超棒且可提高生产力的 NPM 包

6.Styled-components[19] 在组件和样式之间架起桥梁的 CSS-in-JS 工具，提供了大量的特性，让你以一种功能性和可重用的方式启动和运行样式组件。...配置模块 24.Config[45] 设置存储在应用程序中的配置文件中，可以由环境变量、命令行参数或外部源覆盖和扩展。...模板语言 29.Mustache[50] Mustache 是一种无逻辑的模板语法。它可以用于 HTML，配置文件，源代码等任何东西。它的工作原理是使用 hash 或对象中提供的值在模板中展开标记。...系统模块 65.Fs-extra[88] fs -extra 包含了 Node.js fs 包中没有包含的方法，比如 copy(), remove(), mkdirs() 66.Node-dir[89]...用于一些常见目录和文件操作的模块，包括用于获取文件数组、子目录和用于读取和处理文件内容的方法。

5.9K3 0

node.js -4- ejs 简单教程

ejs 是 node.js 的一种模板引擎，本文介绍简单用法。简介 EJS是一个javascript模板库，用来从json数据中生成HTML字符串。...功能：缓存功能，能够缓存好的HTML模板；用来执行javascript代码 ejs模板文件后缀名 .ejs 常用语法用包含 js 代码用输出变量变量若包含 '' '&'等字符会被转义用输出变量不转义用引入其他模板包含 ....; // 渲染文件模板, // comic.ejs 包含 header.ejs footer.ejs, // 若include了文件必须指定 filename参数 , 参数为文件路径， // 文件所在目录为查找...', { data: data }) %> 上面的代码将path目录下的filename.ejs文件引入到当前文件中，并将data的值传入filename.ejs文件中。

1.7K1 0

分享 73 个让你事半功倍的 NPM 包

它可以用于 HTML、配置文件、源代码——任何东西。它通过使用散列或对象中提供的值扩展模板中的标签来工作。...EJS 拥有庞大的活跃用户社区，并且该库正在积极开发中。...它的主要目的是捆绑 JavaScript 文件以在浏览器中使用，但它也能够转换、捆绑或打包几乎任何资源或资产。...系统模块 65、Fs-extra 地址：https://www.npmjs.com/package/fs-extra Fs-extra 包含原版 Node.js fs 包中未包含的方法，例如 copy(...66、Node-dir 地址：https://www.npmjs.com/package/node-dir 用于一些常见目录和文件操作的模块，包括用于获取文件数组、子目录以及读取和处理文件内容的方法。

5.3K2 0

Egg 中使用模板引擎及引用静态资源

在 config 文件夹下找到 plugin.js 文件，导出ejs 'use strict'; // 导出 ejs exports.ejs = { enable: true, package...在config 文件夹下找到 config.default.js，配置ejs 'use strict'; module.exports = appInfo => { const config...config.view = { mapping: { // 模板文件以html结尾 '.html': 'ejs',...首先在app文件夹下的router.js中配置路由。...news.js文件里的index方法 router.get('/news', controller.news.index); }; 然后在 controller 文件夹中新建路由所对应的控制器文件

1.3K3 0

【架构师（第十七篇）】脚手架之 ejs 和 glob 的使用

---- 脚手架项目和组件初始化开发将收获什么 ejs 模板渲染 glob 文件筛选项目标准安装和自定义安装组件库初始化和安装主要内容脚手架安装模板功能架构设计脚手架模板安装核心实现 ejs...通过 include 指令将相对于模板路径中的模板片段包含进来。.../ 单个模板文件 ejs.render('<?...若字符在中括号中，则匹配。若以 ! 或 ^ 开头，若字符不在中括号中，则匹配 !(pattern|pattern|pattern) 不满足括号中的所有模式则匹配 ?...erN) 满足 1 个括号中的模式则匹配 ** 跨路径匹配任意字符安装 npm i glob -S 匹配所有 js 文件，忽略 node_modules 下的所有文件以及 webpack.config.js

1.3K1 0

73个超棒且可提高生产力的 NPM 包

4.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云