开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

给定纯文本的HTML只需要使用纯JavaScript (不使用jQuery)

给定纯文本的HTML只需要使用纯JavaScript (不使用jQuery)可以通过以下步骤实现：

创建一个HTML文件，并在文件中引入一个JavaScript文件。
在JavaScript文件中，使用document.createElement方法创建HTML元素。
使用document.createTextNode方法创建文本节点，并将其添加到创建的HTML元素中。
使用appendChild方法将创建的HTML元素添加到文档的特定位置，例如document.body。
最后，使用innerHTML属性将纯文本的HTML内容插入到创建的HTML元素中。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>纯文本HTML插入</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

// script.js
window.onload = function() {
    var htmlText = "<h1>这是一个标题</h1><p>这是一个段落</p>";
    var divElement = document.createElement("div");
    var textNode = document.createTextNode(htmlText);
    divElement.appendChild(textNode);
    document.body.appendChild(divElement);
};

在上述示例中，我们使用JavaScript动态创建了一个<div>元素，并将纯文本的HTML内容作为文本节点添加到该元素中。然后，我们将该<div>元素添加到文档的<body>部分。

这种方法适用于将纯文本的HTML内容插入到页面中，而不依赖于任何外部库或框架。

相关搜索:使用纯JavaScript(无jQuery)为纯文本HTML添加元素到DOM 使用纯Javascript将Json数据导出为纯文本如何使用纯javascript/jquery将对象呈现为html 使用纯Javascript进行按钮文本转换如何使用jQuery在HTML元素旁边获取纯文本？使用jQuery查看粘贴的内容是html还是纯文本如何在纯javaScript的jQuery中使用end()使用JavaScript将转义的html ASCII代码转换为纯文本使用Python从HTML中提取纯文本使用纯javascript的css转换使用模式的纯HTML输入类型文本验证可以在纯HTML中使用JavaScript变量吗？使用html2canvas保存图像-纯Javascript 使用纯Javascript切换HTML5视频静音使用html标签而不是纯文本发送的邮件使用PHP从纯文本和HTML文本的混合创建PDF 部分文本应该使用纯html css、JavaScript或jQuery在旋转木马中更改如何在纯JavaScript中使用对象的函数，而不使用jquery？使用纯JavaScript将HTML表单序列化为JSON 带有jQuery或纯JavaScript的HTML子字符串

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

前端页面替换文本的方法和一些小技巧

在前端页面替换文本有几种做法，不假思索的答案通常是直接用JavaScript。但你有没有想过这完全可以用CSS实现呢？背景在前端页面上，有的时候我们需要根据用户行为，替换的显示文本。比如 “显示/隐藏”、“展开/收起”。这是一个很常见的功能，实现起来也没有太大的难度。 CSS Tricks 有一篇文章谈及“替换文本的五种方法”（Swapping Out Text, Five Different Ways）。在这篇文章里，作者总结了使用五种实现方法，并且在评论里和很多读者进行了一些讨论分析。我在这里总

07

Vue.js框架中权衡的艺术

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

02

HTML5游戏开发实战–当心

1.WebSocket它是HTML5该标准的一部分。Web页面可以用它来连接到持久socketserver在。该接口提供一个浏览器和server与事件驱动的连接。这意味着client每次需要时不再server发送一个新的数据请求。

01

jquery-1.4.2.min.js文件有什么用途？里面的代码都有什么用途？

不管是1.4.2还是jQuery以后的版本，都是用js封装的功能库，方便开发者使用。下面是就jQuery的具体作用：bai

04

jQuery最佳实践

上周，我整理了《jQuery设计思想》。那篇文章是一篇入门教程，从设计思想的角度，讲解"怎么使用jQuery"。今天的文章则是更进一步，讲解"如何用好jQuery"。我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》（jQuery Proven Performance Tips And Tricks）。他是jQuery开发团队的成员，具有一定的权威性，提出的结论都有测试数据支持，非常有价值。 =============================================

06

jQuery最佳实践

jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。

03

一个小时学会jQuery

前一段时间录了一套关于jQuery的视频分享给大家，可以在下载区下载到，本来想配合文字一起的，后面发现视频+帮助文档也是非常好的学习方法。一、jQuery简介与第一个jQuery程序 1.1、jQu

07

不用任何框架开发 Web 应用程序，可能吗？

过去流行的是 Angular，然后是 React，现在是 Vue.js……其他的像 Ember、Backbone 或 Knockout 什么的几乎都快消失了。一些标准，例如 Web Components，则很少被使用。似乎每年都会发布一些新框架，比如 Svelte、Aurelia，而且每个框架在服务器端都有对应的对象（开头那些框架对应的 NestJS、NextJS 或 Nuxt，Svelte 对应的 Sapper，等等）。非 JavaScript Web 框架（如 Django、Spring、Laravel、Rails 等）就更不用说了。甚至还有框架之上的框架（Quasar、SolidJS）、为框架生成组件代码的框架（Stencil、Mitosis），以及 NCDP（无代码开发平台，No-Code Development Platform）。

02

Web前端开发入门不得不看

引如今，各种互联网的Web应用程序层出不穷，那么如何快速入门，成长为一个优秀的Web开发工作者呢？

01

jQuery最佳实践

jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。

02

jquery要怎么写才能速度最快？（转…

1. 使用最新版本的jQuery jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。下面就来看看，不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句：　　$('.elem') 　　$('.elem', context) 　　context.find('.elem') 我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试，看看浏览器在1秒内能够执行多少次。结果如下：

03

jQuery_T2_DOM操作

当我们点击文字的时候会添加一个【p_text】class，对应的style就会生效。

02

深入浅出学习前端开发(入门篇)前言

前言这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同进步,用简书记录下自己的学习历程. 个人学习方法分享整体学习路线分享本文阅读建议 1.一定要辩证的看待本文. 2.准备进行系统的前端学习. 3.本人学习前端的路线可能偏向全栈方向(不是纯前端) 4.本文只阐述学习路线和学习当中的重点问题.需要读者自己使用百度进行拓展学习. 5.觉得哪里不妥请在评论留下建议~ 6.觉得还行的话就点个小心心鼓励下我吧~ ---- 目录 1.HTML &

react思维

作为《深入浅出react和redux》的读书笔记，文章将重点关注自身未去深入理解的问题。

02

強大的jQuery Chart组件-Highcharts

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；对个人用户完全免费；纯JS，无BS；支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；提

05

jQuery入门前言

上次说到了JavaScript，对其有一定了解，本文就来说说jQuery。jQuery就是一个由JavaScript编写的轻量库，简单的说就是封装了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。

03

JQuery基础概念知识

（本文年代久远，请谨慎阅读）JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离。jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

01

jQuery 已经落幕了~

日前，英国政府网站 GOV.UK 删除其网站上所有前端应用程序依赖项 jQuery。删除之后，13 个前端应用程序 JavaScript 大小减少了 32 KB（或 31% 到 49%）之间，其他多项性能提升，团队部分技术债得以清除。

02

前端【vue】实现文档在线预览功能，在线预览pdf、word、xls、ppt等office文件

XDOC可以实现预览以DataURI表示的DOC文档，此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览，具体实现方法请看官方文档下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制

02

1、深入浅出React（一）

npm start启动开发环境，npm run build创建生产环境优化代码，npm test用于测试单元，npm run eject把潜藏在react-scripts中的一序列技术栈“弹射”到应用的顶端，此命令不可逆且会改变和增加一些文件。

01

加点JavaScript魔法

在深入研究客户端之前，让我们先了解一下支持这些用户弹窗所需的服务器端的工作。用户弹窗的内容将由新路由返回，它是现有个人主页路由的简化版本。视图函数如下：

01

jQuery 落幕了！

点击关注公众号，Java干货及时送达出品 | OSC开源社区（ID：oschina2013）作为差点一统全球门户网站的前端工具，jQuery 曾在 Web 2.0 初兴之时风头无两，然而随着前端技术的不断演进与浏览器底层标准的统一，jQuery 却逐渐成为一些网站眼中的 “技术债”。日前，英国政府网站 GOV.UK 删除其网站上所有前端应用程序依赖项 jQuery。删除之后，13 个前端应用程序 JavaScript 大小减少了 32 KB（或 31% 到 49%）之间，其他多项性能提升，团队

01

jQuery的使用

1.需求分析在首页中(logo的上方)显示一个广告图片(页面加载后，间隔3秒弹出广告图片，再间隔3秒后隐藏广告图片)。【使用jQuery实现】

03

Markdown 语法 Markdown 语法

可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式。

02

前端Js框架汇总

随着互联网飞速发展的时代，技术更新迭代的速度也在加快。看着Java、Js、Swift在各领域心花路放，也是煞是羡慕。寻了寻.net的消息，也是振奋人心，.net core 1，mono，xamarin等等，但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品，产品又在不同程度的推进着技术的演进。

03

如何逃离框架孤井？

前面我发过一篇文章，脱离了Spring询问大家能不能继续开发，结果文章下面的评论和回复都告诉我大家伙的基础打得很牢固，该咋写还是咋写。看得我在这内卷的时代瞬间躺平。

03

2018前端工程师成长路线图

成为前端工程师，第一步应该是学习HTML/CSS/JavaScript，这是基础。

02

jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法

http://www.w3school.com.cn/jquery/ajax_ajax.asp

03

目前比较火的前端框架及UI组件

看到的一篇总结性的文章，收藏一下，感兴趣的可以自己看看，哪些是已经会的，哪些是没听说过的，哪些是一知半解的，都可以稍微看看。

04

jquery中ajax参数详解

title: $.ajax参数详解 date: 2017-04-08 15:25:57 tags: ajax categories: ajax

03

程序员Web面试之jQuery

又到了一年一度的毕业季了，青春散场，却等待下一场开幕。在求职大军中，IT行业的程序员、码农是工科类大学生的热门选择之一，尤其是近几年Web的如火如荼，更是吸引了成千上万的程序员投身其中追求自己的梦

动手实践：美化 Jenkins 报告插件的用户界面

对于 Jenkins 而言，可使用插件来可视化各种构建步骤的结果。有一些插件可用于呈现测试结果、代码覆盖率、静态分析等。这些插件通常都会获取给定构建步骤的构建结果，并在用户界面中显示它们。为了呈现这些细节，大多数插件使用静态 HTML 页面，因为这种类型的用户界面是 Jenkins 自 2007 年成立以来的标准可视化。

01

《React极简教程》第二章 React JSXReact JSXReact.createElement独立文件JavaScript 表达式样式数组HTML 标签 vs. React 组件

JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，React 官方推荐使用JSX，当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX，组件的结构和组件之间的关系看上去更加清晰。

02

13个顶级免费所见即所得文本编辑器工具

CKEditor拥有10多年的开发经验，你可以完全放心此文本编辑器的质量。它支持70多种语言，我认为这是你网站的不错选择。它还可以运行在许多不同的浏览器上，并能很好地与大多数前端框架，如reat，vue，angular......你可以使用CDN直接嵌入到你的HTML页面中......。目前它有两个版本并行运行的CKEditor4和CKEditor5，根据不同的使用目的，你会选择适合自己的编辑器。

00

ajax实现跨域_js跨域请求的三种方法

跨域大家都知道，不同地址，不同端口，不同级别，不同协议都会构成跨域。例如：about.haorooms.com和www.haorooms.com都会构成跨域。总结起来只要协议、域名、端口有任何一个不同，都被当作是不同的域。下面举例，每两个一组。

05

「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源

你不懂JS - 可能是用现代JavaScript编写的最好的书，完全可以免费在线阅读，或者可以买来支持作者。

02

「沙里淘金」精选浏览器端JavaScript库资源推荐

你不懂JS - 可能是用现代JavaScript编写的最好的书，完全可以免费在线阅读，或者可以买来支持作者。

02

JQuery选择器和JQuery包装集

（本文年代久远，请谨慎阅读）今天学习了JQuery的一些基本用法，包括JQuery选择器和JQuery包装集；

02

浏览器中的JavaScript：文档对象模型与 DOM 操作[每日前端夜话0x5F]

翻译：疯狂的技术宅原文：https://www.valentinog.com/blog/dom/

01

Knockout.js是什么？

从本节开始介绍关于KnockoutJs相关的内容，本节主要介绍knockoutjs一些重要特性与优点，以及它与Jquery等框架库之间的区别。 1、Knockout.js是什么？ Knockout是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），KO都可以很简单的帮你实现，并且非常易于维护。 2、KO重要特

06

开始学习React js

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（Virtual DOM）和组件化的开发深深的吸引了我，下面来跟我一起领略 ReactJS的风采吧~~ 章有点长，耐心读完，你会有很大收获哦~ 一、ReactJS简介 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2

06

前端开发最核心技术

我们知道，用所谓的网页三剑客已经不能满足需求了，那前端开发究竟要学习什么技术呢？网页最主要由3部分组成：结构、表现和行为。网页现在新的标准是W3C，目前模式是HTML、CSS和JavaScript。

01

迁移到Thymeleaf3.x,布局方言2.x

环境: springboot1.5.4 win10 intellij IDEA2017.1 迁移到Thymeleaf3 如果你的spring boot应用继承spring-boot-starter-parent, 那么只需要添加spring-boot-starter-thymeleaf这个starter依赖,即可使用thymeleaf模板引擎. 从spring-boot-dependencies中的dependencyManagement中可以看到：spring-boot-starter-thymelea

09

推荐 | 解决文库无法复制的问题（续篇）

前段时间我在公众号发表了一篇推文：「什么？你无法复制百度文库的内容？」，之后我收到了不少小伙伴们的反馈，其中也有一些大神分享了他们的经验和方案，我在这里大概整合了一下，并以最通俗易懂的方式向大家分享这些解除文库复制限制的方案。

02

AJAX 请求常用参数(cache、dataType、processData、contentType)

cache 是否在缓存中读取数据的读取。 cache 属性是true（默认值）时：在第一次请求完成之后，如果地址和参数不变化，第二次去请求，会默认获取缓存中的数据，不去读取服务器端的最新数据。 cache 属性是flase（默认值）时：每次读取的是最新的数据。 ajax 缓存只对GET方式的请求有效，因为浏览器认为POST请求提交的内容必定有变化，所以不走缓存。 dataType 是预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断

01

前端-学习JavaScript是一种什么样的体验？

嘿，我最近接到一个 Web 项目，不过老实说，我这两年没怎么接触 Web 编程，听说 Web 技术已经发生了一些变化。听说你是这里对新技术最了解的 Web 开发工程师？

03

JavaScript学习笔记（五）——Ajax

jQuery插件就是开发爱好者自己利用jQuery制作的特效，然后打包成js文件，发布到网上供大家使用的脚本集合。

01

10个短小却超实用的JavaScript代码段

JavaScript正变得越来越流行，它已经成为前端开发的第一选择，并且利用基于JavaScript语言的NodeJS，我们也可以开发出高性能的后端服务，甚至我还看到在硬件编程领域也出现了JavaScript的身影。JavaScript正在逐渐进化为一门全能的开发语言。但用好JavaScript并不容易，你除了需要掌握它的语法并知道如何写出高质量的代码之外，还需要了解如何解决那些几乎在每个项目中都会遇到的需求场景，比如：判断日期，高亮文本，限制字符数等等，有很多第三方库可以解决这些问题，但这些库可

08

第52次文章：AJAX & json

新年快乐呀！时间太快，好好抓紧时间学习吧！哈哈！这周我们看一下同步和异步的技术点~

02

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

D.closest()获得D所有父元素,含自己（D、B、A）与 D.parents() 对比

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭