首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过js下载包含"#“的div innerHTML

通过js下载包含"#"的div innerHTML,可以使用以下步骤实现:

  1. 使用JavaScript选择器获取所有包含"#"的div元素。可以使用querySelectorAll方法,并传入相应的CSS选择器,如document.querySelectorAll('div[id*="#"]')。
  2. 遍历获取到的div元素列表,可以使用forEach方法或for循环。
  3. 对于每个div元素,获取其innerHTML内容。可以使用innerHTML属性,如div.innerHTML。
  4. 将获取到的innerHTML内容保存为一个字符串变量,以便后续操作。
  5. 创建一个Blob对象,将保存的字符串内容作为参数传入Blob构造函数,同时指定MIME类型为"text/plain"。
  6. 使用URL.createObjectURL方法创建一个临时的URL,将Blob对象作为参数传入。
  7. 创建一个a标签元素,设置其href属性为临时URL,以便进行下载。
  8. 设置a标签的download属性为所需的文件名,例如"result.txt"。
  9. 使用document.body.appendChild方法将a标签添加到页面中。
  10. 使用a标签的click方法模拟点击动作,从而触发下载操作。

以下是一个示例代码:

代码语言:txt
复制
// Step 1
const divList = document.querySelectorAll('div[id*="#"]');

// Step 2 and 3
divList.forEach(div => {
  // Step 4
  const innerHTMLContent = div.innerHTML;
  
  // Step 5
  const blob = new Blob([innerHTMLContent], { type: 'text/plain' });
  
  // Step 6
  const url = URL.createObjectURL(blob);
  
  // Step 7
  const link = document.createElement('a');
  link.href = url;
  
  // Step 8
  link.download = 'result.txt';
  
  // Step 9
  document.body.appendChild(link);
  
  // Step 10
  link.click();
});

通过以上代码,将会下载包含"#"的div元素的innerHTML内容,并将其保存为result.txt文件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • JSinnerHTML、outerHTML、innerText、outerText用法与区别

    1、功能说明: innerHTML 设置或获取位于对象起始和结束标签内 HTML innerText 设置或获取位于对象起始和结束标签内文本 outerHTML 设置或获取对象及其内容HTML...span1 span2 var innerHTML = document.getElementById("mydiv").innerHTML; var innerText =...PS: innerHTML是符合W3C标准属性,而innerText对Firefox是不支持,因此,尽可能地去使用innerHTML, 而少用innerText,如果要输出不含HTML标签内容...,可以使用innerHTML取得包含HTML标签内容后, 再用正则表达式去除HTML标签,下面是一个简单符合W3C标准示例: console.info(document.getElementById...>/gim,'')); 查看演示:http://itmyhome.com/js_innerHTML_innerText_differences/ 作者:itmyhome 发布者:全栈程序员栈长,

    1.1K20

    JS魔法堂:被玩坏innerHTML、innerText、textContent和value属性

    通过value属性赋值后,则value取值与innerHTML无关。        b). textContent可被设置且生效,对其他属性影响:      1....无条件影响innerHTML取值;       2. 在通过value属性赋值前,会影响value取值;             3....在通过value属性赋值后,则value取值与innerHTML无关。    b). innerText可被设置并且生效,对其他属性影响:             1....无条件影响innerHTML、textContent取值;             2. 在通过value属性赋值前,会影响value取值;             3....无条件影响innerHTML、innerText取值;       2. 在通过value属性赋值前,会影响value取值;             3.

    3.7K70

    js中判断数组中是否包含某元素方法有哪些_js判断数组里面是否包含某个元素

    实际用法: if(arr.indexOf(某元素) > -1){ //则包含该元素} 1 例: var fruits = ["Banana", "Orange", "Apple", "Mango...) { //则包含该元素 } }) 1 2 3 4 5 方法三:array.findIndex() array.findIndex()和array.find()十分类似,返回第一个符合条件数组元素位置...arr = [1, 5, 10, 15]; //传统for for(let i=0; i<arr.length; i++) { if(arr[i] === 查找值) { //则包含该元素...} } // for...of for(v of arr) { if(v === 查找值) { //则包含该元素 } } //forEach arr.forEach...(v=>{ if(v === 查找值) { //则包含该元素 } }) 别的做法: js中存在一个数组,如何判断一个元素是否存在于这个数组中呢,首先是通过循环办法判断,

    10K60

    ❤️使用 HTML、CSS 和 JS 简单倒数计时器 ❤️

    完整源码下载 在线演示 演示地址:http://haiyong.site/daojishi 你可以尝试它现场演示以了解它是如何工作。如果你知道如何创建数字时钟,那么创建这样项目就会容易得多。...然后,在 JavaScript 代码帮助下,从那个时间减去当前时间,减法每秒减少一次。 正如您在上图中所看到,我在这里使用了一张背景图。该页面包含四个小框,分别表示天、小时、分钟和秒。...希望通过本文,您已经学会了如何使用 HTML、CSS 和 JS 简单倒数计时器。我之前使用 HTML、CSS 和 JavaScript 制作了更多类型小工具,如果您愿意,可以查看这些设计。...❤️使用 HTML、CSS 和 JS 创建响应式可过滤游戏+工具展示页面 ❤️ 11个基于HTML/CSS/JS情人节表白可爱小游戏、小动画【情人节主题征文】 我已经写了很长一段时间技术博客,...并且主要通过CSDN发表,这是我一篇 Web 响应式简单倒数计时器教程。

    5.4K20

    使用 HTML、CSS 和 JS 简单倒数计时器

    ❤️使用 HTML、CSS 和 JS 简单倒数计时器 ❤️ 在线演示 第 1 步:倒数计时器基本结构 第 2 步:使用 CSS 代码完善整体样式 第 3 步:调节各部分元素布局 第...完整源码下载 在线演示 演示地址:https://haiyong.site/tools/daojishi 你可以尝试它现场演示以了解它是如何工作。...正如您在上图中所看到,我在这里使用了一张背景图。该页面包含四个小框,分别表示天、小时、分钟和秒。首先,你必须创建一个 HTML 和 CSS 文件。...希望通过本文,您已经学会了如何使用 HTML、CSS 和 JS 简单倒数计时器。我之前使用 HTML、CSS 和 JavaScript 制作了更多类型小工具,如果您愿意,可以查看这些设计。...❤️使用 HTML、CSS 和 JS 创建响应式可过滤游戏+工具展示页面 ❤️ 11个基于HTML/CSS/JS情人节表白可爱小游戏、小动画【情人节主题征文】 如果你真的从这篇文章中学到了一些新东西

    4.8K20

    JavaWeb——JQuery之基本概述与快速入门实践总结(JQuery各版本区别、JQuery对象和JS对象区别与转换)

    举个自定义JS框架简单例子: 1)写一个HTML,通过元素id获取内容并弹出信息提示窗; 2)封装一个js文件,其中将“通过元素id获取内容”js代码封装为get。 ? <!..."div2"); //2、获取标签体内容 alert(div1.innerHTML); alert(div2.innerHTML); </script...3 JQuery对象和JS对象区别与转换 以上两节内容,一个是通过js原生代码获取JS对象,一个是通过$符获取JQuery对象,二者有什么区别吗?能否互相转换?...首先看下二者操作对比:分别通过js和JQuery方式获取名称叫div所有html元素对象,并修改标签体内容: //1、通过js方式获取名称叫div所有html元素对象 var divs = document.getElementsByTagName("div")

    86620
    领券