首页
学习
活动
专区
圈层
工具
发布

通过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文件。

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

相关·内容

  • JS中innerHTML、outerHTML、innerText、outerText的用法与区别

    1、功能说明: innerHTML 设置或获取位于对象起始和结束标签内的 HTML innerText 设置或获取位于对象起始和结束标签内的文本 outerHTML 设置或获取对象及其内容的HTML...span1 span2 div> 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.5K20

    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.

    5.5K70

    【JavaScript——函数编写】谁最长(蓝桥杯真题-7327)【合集】

    index.html 包含用于检测函数的代码。...要求规定 请勿修改 js/index.js 文件外的任何内容。 请严格按照考试步骤操作,切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等,以免造成无法判题通过。...页面内容添加: 在 标签中创建一个 div> 元素,其 id 为 main,用于后续在页面上显示结果。 通过 标签引入外部 JavaScript 文件 ..../js/index.js,该文件中包含了 getMaxArrays 函数的定义。...三、工作流程▶️ 浏览器加载 HTML 页面,解析并执行页面中的代码。 引入外部 JavaScript 文件 ./js/index.js,其中包含 getMaxArrays 函数的定义。

    18700

    原生js与jQuery显示隐藏div的几种方法

    原生Js与jQuery显示隐藏div的几种方法 简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解。...首先是display的方法,display属性的特点为,可以使得div隐藏之后释放占用的页面空间。... 运行的效果 通过这些效果可以看出来,原来的这个按钮的位置表现为空白了,但是所占的位置还是存在的。...通过attr设置属性 $(“#id”).attr(“style”,“display:none;”);//隐藏div $(“#id”).attr(“style”,“display:block;”);//显示...div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show

    2.1K00
    领券