开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

给定纯文本的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子字符串

相关搜索:

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

有帮助

没帮助

相关·内容

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

html 示例如下： Hide 纯 Javascript/jQuery 实现使用 Javascript 或者使用 jQuery...没有侵入 html，没有污染网页的可访问性（Accessibility）。html 和 Javascript 也很好的实现了分离，使得 Javascript 有着可重用性（Reusability）。...譬如在评论中，有读者说为什么不直接使用 $("button").text("Hide"); 这样子直接修改文本。这种做法虽然简单，但是使得数据一部分维护在 DOM、一部分维护在 Javascript。...其实这里只是探讨实现方法而已，在实际中不推荐这样使用。虽然 CSS 是负责样式的，但交替显示文本应该超出了“样式”的范畴。...两个文本，他巧妙的使用数组。

2.3K7 0

Vue.js框架中权衡的艺术

设计框架里到处都体现了权衡的艺术牛逼！！！其实说人话就是就是设计时的技术方案的选型，然后为什么选这个，不选那个，高大上一点就是权衡。...声明式框架：如vue,更关注结果，操作dom,修改dom的过程我们不用关心，vue去帮我们我们完成，我们只需要告诉框架我们需要什么样的东西以一个操作dom的场景为例子获取一个dom\ 设置文本内容hello...声明式框架，更加傻瓜式一些，只需要告诉框架，我需要的结果，但是如果告诉框架，有框架自定义的一套规范，有学习成本和使用成本。...所以控制使用次数。当新建页面时 const html = ` ......dom 性能是很不错的，目前没有更好的方案运行时和编译时的权衡设计一个框架时，一般有三种选择纯运行时我个人理解，纯运行时，就比如jquery，或者和命令式框架写法相似纯编译时比如Svelte

1.7K2 0

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

.需要读者自己使用百度进行拓展学习. 5.觉得哪里不妥请在评论留下建议~ 6.觉得还行的话就点个小心心鼓励下我吧~ ---- 目录 1.HTML & CSS 2.HTML5 & CSS3 3.JavaScript...如果你暂时不想学习JavaScript交互,可以跟我一样先进行PHP和MySQL的学习. ---- JavaScript & jQuery 众所周知,HTML5与CSS3做的都是静态网页,而绚丽丰富交互效果是需要用到...它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。...目前没有进行系统的学习,日后更新所属知识点 jQuery jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript...PHP文件可以使用文本编辑器编写,但是没有服务器环境就无法解析,计算机根本不知道PHP文件是什么,这时Apache就担当了这个角色,提供了对PHP文件的解析支持.

1K13 0

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

cache 属性是flase（默认值）时：每次读取的是最新的数据。 ajax 缓存只对GET方式的请求有效，因为浏览器认为POST请求提交的内容必定有变化，所以不走缓存。...dataType 是预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。...可用值: xml 返回 XML 文档，可用 jQuery 处理。 html 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。...script 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。...text 返回纯文本字符串 processData 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型

1.2K1 0

jQuery - Ajax详解分析

如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。...可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。..."script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。...（因为将使用 DOM 的 script标签来加载） "json": 返回 JSON 数据。 "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?...jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 "text": 返回纯文本字符串

1.6K0 0

ajax 写法_常见词缀汇总

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。...如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：xml：返回XML文档，可用JQuery处理。...html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。...使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。text：返回纯文本字符串。...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

1.1K1 0

【前端系列-1】ajax与Springboot通信将数据库数据渲染到前端表格

前言 jQuery对原生js进行了大量封装，让我们使用起来更加方便，尤其ajax。这里就对jQuery的ajax做一个总结。...jQuery依赖，本文是下载的jquery-2.1.1.min.js文件放入static/lib中。 index.html是项目的默认访问页面。...dataType(String)：服务器预期返回的数据类型。如果不指定，jquery将根据HTTP包MINE信息返回responseXML或responseText,并作为回调函数参数传递。...可用类型： xml：返回XML文档，可用jquery处理 html：返回纯文本HTML信息，包含的script标签会插入DOM时执行。 script:返回纯文本JavaScript代码。...使用JSONP形式调用函数时，例如myurl?callback=?，jquery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。

2.5K4 1

jquery ajax参数详解

"{字符串:正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定其内容类型。...如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。...可用值: “xml”: 返回 XML 文档，可用 jQuery 处理。 “html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。...“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意：’’'在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。...“text”: 返回纯文本字符串 error type:Function (默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。

2.5K1 0

強大的jQuery Chart组件-Highcharts

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；对个人用户完全免费；纯JS，无BS；支持大部分的图表类型...：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js...jquery下载地址 http://jquery.com/ 本次介绍是把highcharts中的第一个文件拷贝过来，然后把其他的功能加在了这个文件中，然后查询相关资料，导出图片格式不需要连到官方服务器了...-- 1.引入jquery库 --> ...強大的jQuery圖表套件-Highcharts http://www.helloweba.com/tag.html?

2.1K5 0

jQuery_T2_DOM操作

DOM操作的内容 jQuery的DOM DOM转jQuery对象 DOM样式添加 jQuery元素属性设置 toggle切换编辑html()与text()区别 DOM添加图片纯dom添加元素克隆元素...jQuery的DOM 使用 jQuery 选择器选择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具有特有的方法和属性，完全能够实现传统 DOM 对象的所有功能使用jQuery操作元素...使用选择器获取某个元素使用jQuery对象的方法操作元素。...DOM对象，并将它们包含在一个数组中 DOM 对象转换成 jQuery 对象对于一个 DOM 对象，只需要用 () 将它包装起来就可以获得对应的 jQuery 对象，其语法结构为：(DOM 对象 )...示例：利用js的DOM修改颜色，使用jQuery对象修改文本内容点击变颜色·变文字

7.8K2 0

一个小时学会jQuery

1.4、获得jQuery库 jQuery不需要安装，把下载的jQuery库放到网站的一个公共位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件即可。...hello')") //包含hello文本的节点 $("td:empty") //不包含子节点或者文本的空节点 $("div:has(p)") //含有选择器所匹配的节点 $("td:parent...可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。..."script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。..."text": 返回纯文本字符串 error Function (默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。

18.5K7 1

jQuery 已经落幕了~

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性，并对其中的内容进行修改和删除、创建新的元素等等。...在 jQuery 之前，使用 JavaScript 操作 DOM 需要定义一个函数，然后将其绑定到特定 DOM 中的各种 HTML 元素中，这对于日常使用来说非常繁琐和复杂。...另一方面，在纯 JavaScript 开发中，开发者需要检查浏览器使用何种方式添加事件，然后再做选择，但是 jQryue 提供了隐藏了不同浏览器的 JavaScript 实现之间的一些不兼容性，可以自行检查浏览器需要什么方式...但这时的 HTML 5 还尚未定稿，同时也受到一些质疑，比如 2012 年 Facebook 应用放弃 HTML5 部分，改为纯原生方式开发。...但 jQuery 目前最大的优势，是相对轻量，只需要面向浏览器，而新框架则需要很多工程化的手段，技术门槛比 jQuery 高。

6852 0

解决innerHtml 在Jquery上使用无效果的问题

**innerHTML是JavaScript原生的一种写法，给指定标签赋内容（并且若内容中有HTML标签，可以进行编译后显示，例： document.getElementById("timeShow...").innerHTML = "加载本页耗时 "+ (new Date().getTime()-t1) +" 毫秒"; 或使用Jquery的方式： $("#timeShow").html('加载本页耗时...' + loadTime + 'ms'); innerHTML在JQuery中使用的话是无效果的， JQuery提供了三种方法实现指定标签赋内容:.html(),.val(),.text()。...，只读取第一个元素:( 这句话实测是一个标签使用了多个.html()时，只有第一个.html()有效，假如一个标签同时使用了.html()，.text()也是第一个有效) .text()用来读取或修改元素的纯文本内容...对应js中的innerText text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上 .val()用来读取或修改表单元素的value值 .val()是用来读取表单元素的

3981 0

jQuery入门前言

jQuery就是一个由JavaScript编写的轻量库，简单的说就是封装了一些JavaScript的操作，所以使用jQuery比使用原生的JavaScript可以达到用更少的代码做更多的事的效果。...一、初识jQuery： 1、使用方法：去官网http://jquery.com/download/下载jQuery的包，然后放到项目中存放js代码的目录下，最后在需要用jQuery的HTML中用<script...image.png 2、.html()、.text()和.val()：读取、修改元素的html结构或者元素的文本内容又或者操作表单字段value值是常见的DOM操作，jQuery针对这样的处理提供了...(如果有多个p标签，那么其他p标签里的文本内容也能获取到) alert($(".demo p").text());//会弹出 “baidu ”，所以该方法只能获取纯文本内容 //第二种用法...的遍历： jQuery的遍历有很多种方式，下面来看一下都如何使用。

2.8K3 0

Markdown 语法 Markdown 语法

可读性，无论如何，都是最重要的。一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。...Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，而最大灵感来源其实是纯文本电子邮件的格式...写md几乎就是写自动排版的纯文本，你写doc和HTML试试？...Markdown 的理念是，能让文档更容易读、写和随意改。HTML 是一种发布的格式，Markdown 是一种书写的格式。就这样，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。...比如，你在 HTML 区块内使用 Markdown 样式的*强调*会没有效果。

1.5K2 0

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

可用值: "xml": 返回 XML 文档，可用 jQuery 处理。 "html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。..."script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。...jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。 "text": 返回纯文本字符串 error 类型：Function 默认值: 自动判断 (xml 或 html)。...如果服务器报告说返回的数据是 XML，那么返回的结果就可以用普通的 XML 方法或者 jQuery 的选择器来遍历。如果见得到其他类型，比如 HTML，则数据就以文本形式来对待。...如果指定为 html 类型，任何内嵌的 JavaScript 都会在 HTML 作为一个字符串返回之前执行。

14.5K3 0

$.ajax()方法详解

如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。...html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。...使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。...通常在本地和远程的内容编码不同时使用。...()方法，它是一个全局函数，不操作JQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。

1.8K2 0

网站设计、开发必备！8个颜色选择器让你事半功倍！

JScolor JSColor是一个简单、易于使用的JavaScript库，可以将任何给定input框转化为颜色选择器 -- 配合标签使用。...Farbtastic Farbtastic是一个jQuery的颜色拾取插件(配合jQuery使用)，可以非常轻松地将颜色选择器添加到Web页面中。...它能够在一个页面中加入多个颜色选择控件，然后每个控件关联到页面中的一个元素比如：文本输入框。当选择一个颜色时即更新元素值。 5....该JavaScript颜色拾取器是一个自足JS库，仅包含一个纯js的文件，不依赖其他框架（像jQuery, Dojo, MooTools等），但又能很好的兼容这些框架。 6....大小只有5K(不压缩的情况下)，非常轻量。 7. jPicker jPicker是一个快速、轻量级的jQuery插件，让你的Web项目中可以包含一个高级颜色拾取器。

3.3K2 0

AJAX使用说明书

即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。...如果不指定，jQuery将自动根据HTTP包的mine信息返回responseXML或responseText，并作为回调函数参数传递。...可用的类型如下： xml：返回XML文档，可用jQuery处理。　　html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。　　...script：返回纯文本javascript代码。不会自动缓存结果，除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。　　...使用JSONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。　　text：返回纯文本字符串。

2.7K7 0

JavaScript的理解记录（5）

，返回一个NodeList对象或Element；功能与JQuery类库中的()相似，两者参数相同，不同的是：()返回值为一个JQuery对象表示匹配的元素集，JQuery对象是一个类数组，可以用标准的数组标示方括号来访问...outerHTML :返回的字符包含查询元素的开头和结尾标签;(HTML5才有且FireFox浏览器不支持）　　　　　　　　　textContent: 返回纯文本；IE不支持　　　　　　　　 innerText...:也是返回纯文本，但不返回元素的内容；FireFox不支持；　　　 5、节点的增删：操作文档进行文档节点的增加和删除　　　　　　　　 1、创建节点：document.createElement...() 参数为不区分大小写的标签名(对于HTML),对XML文档会区分大小写；第二种方法是复制已存在的节点，每个节点都有一个cloneNode()方法放回节点的副本；　　　　　　　　 2、插入节点：使用... 　　　　　　　其二：设置对应元素的JavaScript contenteditable属性; 　　　　　　　　浏览器定义了多项文本编辑命令，为了执行这些命令，应该使用Document

1.4K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭