在 JAVASCRIPT 中创建 HTML 元素...

能在 JavaScript 中创建一个 HTML 元素吗？答案是肯定的，你可以在 JavaScript 中创建一个元素让我们看看如何？

如果你想在 JavaScript 中创建一个 div 元素——

要在 JavaScript 中创建新元素，我们使用 document.createElement('div')，而不是 div，您可以分配任何 html 标签，例如 p、h1、h2、h3 等，如果您分配 p 标签，它将创建一个 p 标签。

现在，如果你想给它上一堂课，你可以做到——

为了给我们的新 div 一个类，我们使用 variablename.className = ‘class_name’ ，如上所示。

现在你也可以给它 id —

为了给 newdiv 一个 id，我们的代码是 variablename.id = ‘id_name’;

现在让我们看看我们的输出

现在，从上面的代码中，我创建了一个带有类容器和 id newElement 的 div 元素。

还有另一种方法可以在标签上设置 class 、 id 、 title 、 name ，让我们来看看。

在这里，我定义了 setAttribute() 并在括号内首先定义了标题，然后定义了标题的名称。除了标题，您可以指定类、id 或任何名称

现在我们来看看我们的输出

您可以清楚地看到，在 div 标签内，我们的代码添加了标题，即“新 div”。

现在如果你想在 div 标签内添加内容怎么办？例如，在我的 div 元素中，我想添加 Hello medium reader！我怎样才能做到这一点？下面来看看吧。

在上面的代码中，我使用 document.createTextNode() 将我的文本分配给变量内容，因此 TextNode 用于为我们的元素提供文本。

所以，我们已经成功地向我们的 div 元素添加了一个文本。

现在，最重要的是，如果您想将内容插入现有的 html 代码以便在浏览器中看到它，您可以通过 insertBefore(newNode, referenceNode) 来完成它的作用是在参考节点之前插入您的节点。

所以在这里我从上面的 html 代码中创建了一个带有类容器和 h1 标签的 div 元素。

现在，我定义了一个名为 maindiv 的变量，并将其分配给具有类容器的 div 元素，并定义了一个变量 h1 并为其分配了 h1 标记。

现在，为了插入我们的节点，我使用了 inserbefore(newNode, referenceNode) ，其中 newNode 是必须插入的节点，即我们的 newdiv ，参考节点是要在其之前插入 newNode 的节点，即我们的 h1 标记。

所以从上面的输出你可以看到我们已经成功地在浏览器中显示了我们的 div 内容。

JavaScript 是一种非常有效的语言，你可以在 JavaScritp 中做很多事情，这些只是它的基础。

谢谢你

绍

JSS是CSS的创作工具，它允许你使用JavaScript以声明，无冲突和可重用的方式描述样式。它可以在浏览器，服务器端或在构建时在Node中编译。JSS与框架无关。它由多个包组成：核心部分，插件以及框架集成等。

Github

https://github.com/cssinjs/jss stars:5.1k

快速开始

如果你已经对使用JSS感兴趣，可以使用在线代码编辑器。在CodeSandbox（一个非常实用的在线编辑器，可以用来学习各种编程技能）上尝试Hello World示例。以下是三种不同框架下的用法（代码图片生成自carbon网站）：

React-JSS

Styled-JSS

特性

真实的CSS

JSS生成实际的CSS，而不是内联样式。它支持每个现有的CSS功能。CSS规则只创建一次，并使用其类名与元素重复使用，与内联样式相反。此外，当DOM元素更新时，将应用先前创建的CSS规则。

无冲突选择器

JSS默认生成唯一的类名。它允许避免典型的CSS问题，默认情况下一切都是全局的。它完全消除了命名约定的需要。

代码重用

使用JavaScript作为宿主语言使我们有机会以常规CSS无法实现的方式重用CSS规则。您可以利用JavaScript模块，变量，函数，数学运算等。如果做得好，它仍然可以完全声明。

易于拆卸和修改

CSS规则的明确使用允许您跟踪消费者并确定是否可以安全地删除或修改它。

动态Style

使用JavaScript函数和Observable可以在浏览器中动态生成样式，使有机会访问应用程序状态，浏览器API或远程数据以进行样式设置。你不仅可以定义一次样式，还可以在任何时间点以有效的方式更新样式。

用户控制的动画

JSS可以高效地处理CSS更新，可以使用它创建复杂的动画。使用函数值，Observables并将它们与CSS过渡相结合，可以为用户控制的动画提供最大的性能。对于预定义的动画，使用@keyframes和transition更好，因为它们将完全取消阻止JavaScript线程。

关键的CSS

要优化第一次绘制的时间，你可以使用服务器端渲染并提取关键CSS。可以将CSS的呈现与HTML的呈现结合起来，这样就不会生成未使用的CSS。它将导致在服务器端呈现期间提取的最小关键CSS，并允许内联它。

插件

JSS核心实现了基于插件的架构。它允许您创建可以实现自定义语法或其他强大功能的自定义插件。JSS有许多官方插件，可以单独安装或使用默认预设。社区插件的一个很好的例子是jss-rtl。

Expressive 语法

由于各种插件，JSS允许您使用现有的全局类名来嵌套，全局选择器和组合。例如，允许您以比CSS更可读的方式表达属性。如果要直接从浏览器开发工具复制粘贴样式，也可以使用模板字符串。jss-plugin-expandbox-shadow

完全隔离

另一个有用的插件示例是，它允许您完全隔离元素与全局级联规则，并可能覆盖不需要的属性。在创建应该在第三方文档内部呈现的窗口小部件时尤其有用。jss-plugin-isolate

React整合。

React-JSS包提供了一些额外的功能：

动态主题 - 允许基于上下文的主题传播和运行时更新。
关键CSS提取 - 仅提取渲染组件中的CSS。
延迟评估 - 样式表在组件安装时创建。
样式表的静态部分在所有元素之间共享。
使用props作为参数自动更新函数值和规则。

JavaScript构建管道

CSS不需要额外的构建管道配置。无论你选择构建JavaScript的工具是什么，它都可以与JSS一起使用。

安装使用

yarn add jss

yarn add jss-preset-default //使用默认设置

import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())
// 创造你的style.
const style = {
 myButton: {
 color: 'green'
 }
}
//编译样式，应用插件。
const sheet = jss.createStyleSheet(style)
//如果要在客户端上呈现，请将其插入DOM。
sheet.attach()
//如果要渲染服务器端，请获取CSS文本。
sheet.toString()

使用自定义插件进行设置

import jss from 'jss'
import camelCase from 'jss-plugin-camel-case'
import somePlugin from 'jss-some-plugin'
//使用插件。
jss.use(camelCase(), somePlugin())
// Create your style.
const style = {
 myButton: {
 color: 'green'
 }
}
//编译样式，应用插件。
const sheet = jss.createStyleSheet(style)
// 如果要在客户端上呈现，请将其插入DOM
sheet.attach()
// 如果要渲染服务器端，请获取CSS文本。
sheet.toString()

指定DOM插入点

<head>
 <title>JSS</title>
 <!-- 自定义插入点 -->
</head>

import jss from 'jss'
jss.setup({insertionPoint: 'custom-insertion-point'})

<head>
 <title>JSS in body</title>
</head>
<body>
 <div id="insertion-point">
 这可能是你选择的任何DOM节点，可以作为插入点。
 </div>
</body

import jss from 'jss'
jss.setup({
 insertionPoint: document.getElementById('insertion-point')
})

简单案例

通过两张图片来体验：

总结

JSS的功能是十分强大的，不仅仅让写css的方式放到了JavaScript，这样对更加喜爱编写javascript的小伙伴来说是值得尝试的，而且还支持服务器端渲染等更多高级的特性，前端技术百花齐放，但目前仍然不变的是掌握JavaScript者得天下的时代！

者 | Mateusz Iwaniuk

译者 | 明明如月，责编 | 夕颜

出品 | CSDN（ID：CSDNnews）

文章配套代码: https://github.com/iwaniukooo11/email-sender

现在，即使是创建最基本的网站，程序员也必须使用现代的功能和技术。甚至像为你的朋友创建简单的投资组合这样的基本项目也可能涉及到一些问题，比如从联系人表单接收数据。有很多方法可以读取这些数据。你可以将表单与数据库连接起来，然后从数据库中读取传入的消息来实现功能，但这样做会给不懂技术的客户造成困难。

你为什么不通过发送电子邮件传输信息？

不使用数据库就能接收到传入的消息，绝对是最佳选择，也是最方便用户的选择。但问题来了—如何实现呢？你可能认为需要使用某种后端语言。

实际上，你不必使用任何如 php 或 python 这种后端语言，你甚至不需要用到 node.js！你需要的就是一个简单的EmailJS 库。

本文将介绍下面两个重要功能:

配置 emailjs 帐户
使用 JS 发送电子邮件

请注意，在我的项目中，我使用了 gulp 和 webpack，我在 src 文件夹存放源码，dist 存放最终发布版本的代码。

我将分 5 个步骤向你展示如何从头开始构建电子邮件发送器。

步骤1-用 HTML 创建表单

首先需要创建一个 HTML 表单。你不必放置像 required 或 max 这种验证属性，因为稍后，preventDefault 函数将在你的提交事件上运行，它会让这些属性的处理失效。

表单中最重要的是为每个输入放置 name 属性，后面会用到。

我的非常简单的表单是这样的:

src/html/index.html

 <form class="form"> <input name='name' type="text" placeholder="Your name..." class="form__input" /> <input name='topic' type="text" placeholder="Topic..." class="form__input" /> <textarea name='message' type="text" placeholder="Your Message..." class="form__input" ></textarea>

 <input type="submit" value="send" class="form__input form__input--button"> </form>

步骤2-注册成为 email 用户

要配置你的电子邮件，你必须注册电子邮件服务。别担心—使用这个网站非常方便和省时。

登入后，系统会询问你的电子邮件服务，它位于个人电子邮件服务区（personal email service）。在我的例子中，我选择了 gmail。

然后，你需要连接你的 gmail 帐户。这将用来发送电子邮件给你客户。例如，如果你关联了 xyz@gmail.com 账户，你后续发送的邮件都将从这个邮箱发出。所以不要担心“ Send email on your behalf” 这个授权信息—这正是你需要的！

连接完 gmail 账户后，点击添加服务（add service）按钮。

步骤3-创建邮件模板

如果你已经成功连接了你的 gmail 账户，你现在应该在信息中心中。现在需要创建电子邮件模板了。

切换到电子邮件模板卡，并单击创建一个新的模板（create a new template）。界面非常友好，所以创建模板不会有任何问题。

你可以选择模板的名称和 ID。我称之为“我的神奇模板（my_amazing_template）”。

接下来，你必须指定邮件的内容。

模板的变量值来自 input 中的 `name` 属性。你已将变量插入`{{{}}}`符号中。

不要忘记在“收件人”部分 (右侧) 添加电子邮件地址。你的电子邮件将被发送到该电子邮件地址上。截图中的收件人邮箱是我自己的公司邮箱。

这是我的简单模板，它使用来自 HTML 表单里的 3 个变量。我还指定了接收电子邮件的主题。

步骤4-保存 API 密钥

这部分没什么特别的。Emailjs 共享授权 API 密钥，将在发送电子邮件时使用。当然，放这些钥匙最好的地方是`.env` 配置。但是因为我使用的是简单的静态文件，我不想使用服务器配置，所以我将它们保存在 apikeys 文件中，然后再将它们导入。

你的 USER_ID 位于 Account > API Keys 菜单下。

TEMPLATE_ID 位于模板的标题下面。

这是我基于不存在的 keyssrc / js / apikeys. js 的示例配置.

src/js/apikeys.js

export default { USER_ID :'user_DPUd-rest-of-my-id', TEMPLATE_ID:'my_amazing_template'}

如果需要将源码发布到 GITHUB，不要忘记将 APIKEYS 文件添加到 .GITIGNORE文件中

步骤5-发送电子邮件

现在是该项目最后也是最重要的部分的了。现在我们必须使用 javascript 发送电子邮件。

首先，你必须下载 emailjs 包。

npm i emails-com

然后，转到 js 文件，导入库和 apikeys。

src/js/main.js

import emailjs from 'emailjs-com'import apiKeys from './apikeys'

现在是编写发送电子邮件功能的时候了

src/js/main.js

const sendEmail = e => { e.preventDefault

 emailjs .sendForm('gmail', apiKeys.TEMPLATE_ID, e.target, apiKeys.USER_ID) .then( result => { console.log(result.text) }, error => { console.log(error.text) } )}

sendForm 函数有4个参数:

你的电子邮件的 ID，在这里:

TEMPLATE_ID 来自 apikey 文件,

事件对象来自你的表单提交

USER_ID 来自 apikey 文件,

最后，查找表单并添加提交事件监听器：

src/js/main.js

const form = document.querySelector('.form')form.addEventListener('submit',sendEmail)

正如我前面提到的，由于 `preventDefault` 函数，属性验证将无法工作。你必须使用 JS 自己进行验证和清除输入。

以上就是全部内容，接下来让我们测试一下。

填写页面上的表单并发送。

我收到电子邮件，内容正是根据我们的模板和表单数据渲染出来的。

通过上图可以看出，所有的变量的值都填充到了正确的位置上。

总结

通过本文的介绍你会发现用 JS 发送邮件并非难事。

使用 emailjs，你可以简单的方式发送电子邮件。

我相信你未来的用户会很高兴收到来自他们网页上表单填写数据的t邮件，相信本文对你有帮助。

这篇文章的配套代码在这里: https://github.com/iwaniukooo11/email-sender

原文链接：

https://dev.to/iwaniukooo11/send-e-mails-directly-from-front-end-with-js-5d7d

本文为CSDN翻译文章，转载请注明出处。

☞我们想研发一个机器学习框架，6 个月后失败了

☞生产型机器学习已经没那么困难了？

☞视频 | 你不知道的"开源"60年秘史

☞GitHub标星10,000+，Apache项目ShardingSphere的开源之路

☞阿里技术专家告诉你，如何画出优秀的架构图？

☞加拿大API平台如何做到30%为中国明星项目？创业老兵这样说……

在线咨询

上一篇：Spring MVC的工作原理，我们来看看其源码实现
下一篇：聊一聊JavaScript和Java、C#的“箭头函数”

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

在 JAVASCRIPT 中创建 HTML 元素...

绍

Github

快速开始

特性

安装使用

简单案例

总结

步骤5-发送电子邮件

总结

您的项目需求