关于js插入页面元素问题 在js中创建html元素并在 引入js的地方直接显示

最新推荐文章于 2023-10-22 22:16:56 发布
最新推荐文章于 2023-10-22 22:16:56 发布
阅读量309 收藏
点赞数
分类专栏： 技术杂绘
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_17030/article/details/82363087
版权
　　最近开发网页,有许多组件需要js的方式引入
　　有个需求是在引用js的层内直接显示插件,为保证通用性,事先不知道是哪个层.
　　联想到flex 在页面引入embed 就是直接一个js
　　查了下原来是使用 document.write()方法 ok! 24.htm insertAdjacentHTML插入新内容 在文本前容器内插入内容"); document.all.paral.insertAdjacentHTML("beforeEnd", "在文本后容器内插入内容"); document.all.paral.insertAdjacentHTML("beforeBegin ","在文本前容器外插入内容"); document.all.paral.insertAdjacentHTML("afterEnd","在文本后容器外插入内容"); } // --> style="fontsize:6;color='#ff00ff'" mce_style="fontsize:6;color='#ff00ff'">原来的内容 这是目标层1 haha我是插入的内容'); // --> 后面的层 这是目标层2 后面的层
iteye_17030
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在js文件中引入（调用）另一个js文件的三种方法
10-14
但在JS文件中，我们可以通过动态创建`<script>`标签并将其插入到DOM中来实现引入： ```javascript function addScript(url) { document.write('<script language="javascript" src="' + url + '"></script>'); } `...
js实现动态创建的元素绑定事件
10-21
在JavaScript中，我们可以使用`document.createElement()`或innerHTML属性等方法来创建新的HTML元素，并将它们插入到页面的DOM（文档对象模型）中。这些元素在创建时并不存在于页面上，因此，如果尝试使用常规的事件...
js为页面插入元素
热门推荐
Extreme的博客
06-10 2万+
插入元素的方式有三种 document.write() 这个方法如果在页面加载完成后使用，会清空整个页面的内容。如果在加载完成后使用，会在页面最后添加。 innerHtml() 这个方法可以用来插入内容，也可以插入元素。插入的内容或元素默认会替代原有内容 createElement(), appendChild() 使用createElement方法创建元素会返回一个元素对象， 使用a...
js添加元素的方式
weixin_68915174的博客
10-29 1万+
innerHTML可以输出标签以及内容，innerText只能输出内容不能输出标签。beforebegin：插在元素自身的前面。beforebegin：插在元素自身的前面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterbegin：插在元素内部最前面。beforeend：插在元素内部最后面。afterend：插在元素自身的后面。afterend：插在元素自身的后面。
JS：如何创建新元素并添加到页面中
TianXuab的博客
10-10 1370
通过JavaScript，我们可以根据用户的操作、数据的变化或其他条件来动态地生成新的元素，并将其插入到页面的特定位置。通过JavaScript，我们可以轻松地创建新的HTML元素并将其添加到页面中。通过设置元素的属性，我们可以改变元素的外观、行为和其他特性。创建新元素并设置其属性和内容后，我们需要将其添加到页面中的特定位置。除了设置元素的属性，我们还可以使用JavaScript来为新元素添加文本内容。要创建一个新的HTML元素，我们可以使用JavaScript的。这个方法接受一个参数，即要添加的元素。
如何用js在页面中添加元素？
最新发布
qq_60504665的博客
10-22 405
想要在页面动态添加元素，首先要确定在哪个元素后面添加元素，然后利用js的appendChild方法在该元素后面追加元素。element.appendChild()方法向节点添加最后一个子节点。element.innerHTML设置或返回元素的内容。3.把创建好的a标签追加到body下面。4.在a标签里面添加文本内容。5.给a标签添加一个链接。2.然后动态创建a标签。
JS-添加元素的步骤创建空元素、设置关键属性、将元素添加到DOM树
weixin_47295886的博客
07-21 577
createElement appendChild insertBefore 文档片段
在JavaScript中对HTML进行反转义详解
11-22
这些字符在HTML中有着特殊的含义，如果直接插入到页面中，可能会导致解析错误或者安全问题。因此，我们需要在JavaScript中将这些转义字符还原为它们的原始HTML实体。 常见的JavaScript转义和反转义函数包括`...
html中通过JS获取JSON数据并加载的方法
10-18
在HTML页面中，我们经常需要通过JavaScript来获取JSON数据，并将其加载到页面上显示。这篇内容将详细介绍如何通过JavaScript解析JSON数据并将其加载到HTML中。 首先，HTML部分提供了一个基本的容器结构，如示例代码...
HTML页面自动清理js、css文件的缓存（自动添加版本号）
12-13
首先，我们可以使用JavaScript动态地在HTML中插入样式表（CSS）和脚本（JS）链接。例如，方法一是利用`document.write`来创建一个新的`<link>`元素，并将其`href`属性设置为包含当前时间戳的CSS文件路径。这样，每次...
JS在页面上创建元素
weixin_45060872的博客
03-13 541
创建元素 1.document.write 不常用 原因是会覆盖原本的页面内容 document.write("<h1>我是标题</h1>"); 覆盖原理： 默认情况下，页面加载会形成一个文档流，当页面所有内容加载完毕之后，这个文档流(默认的文档流)就会关闭， 当触发某个事件，调用document.write向页面添加内容的时候，就会形成新的文档流，就会覆盖原本的页面内容...
如何用js在页面中添加元素
likai_loveweb的博客
10-22 1877
var mask = document.createElement("div");//js新建元素 mask.setAttribute("id", "maskDiv");//给元素加id mask.onclick = hideMask;//给元素添加点击事件 var img = document.createElement("img"); img.style.fl
使用 JavaScript 向网页中添加元素
kllo__的博客
02-09 2275
创建元素 // Create an li element const pythonElement = document.createElement("li"); 设置元素属性 // ... pythonElement.id = "python"; // Define element ID pythonElement.textContent = "Python"; // Define its text content 将元素插入 DOM // I...
如何在Vue2.0项目中获取页面中的canvas元素作为图片插入到xlsx文件中并下载该文件
05-27
要在Vue2.0项目中获取页面中的canvas元素作为图片插入到xlsx文件中并下载该文件，可以参考以下步骤： 1. 首先，需要在Vue组件中引入xlsx和file-saver库。可以使用npm安装这两个库。 2. 在组件中，使用ref属性获取canvas元素的引用。例如，可以给canvas元素添加ref="canvasRef"属性。 3. 在生成xlsx文件的方法中，先获取canvas元素的引用。可以使用this.$refs.canvasRef获取该引用。 4. 使用canvas的toDataURL()方法获取canvas元素的base64编码字符串，作为图片的数据源。 5. 使用xlsx库的工具函数将base64编码字符串转换为二进制数据流，并插入到xlsx文件中。 6. 最后，使用file-saver库将生成的xlsx文件下载到本地。 以下是示例代码： ```javascript <template> <div> <canvas ref="canvasRef"></canvas> <button @click="downloadExcel">下载Excel文件</button> </div> </template> <script> import XLSX from 'xlsx' import { saveAs } from 'file-saver' export default { methods: { downloadExcel() { const canvas = this.$refs.canvasRef const imgData = canvas.toDataURL('image/png') const wb = XLSX.utils.book_new() const ws = XLSX.utils.aoa_to_sheet([['Image'], [imgData]]) XLSX.utils.book_append_sheet(wb, ws, 'Sheet1') const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' }) const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' }) saveAs(blob, 'example.xlsx') } } } function s2ab(s) { const buf = new ArrayBuffer(s.length) const view = new Uint8Array(buf) for (let i = 0; i < s.length; i++) { view[i] = s.charCodeAt(i) & 0xff } return buf } </script> ``` 在上面的代码中，downloadExcel()方法会生成一个包含canvas元素的图片的xlsx文件，并将该文件下载到本地。注意，需要在方法中使用s2ab()函数将字符串转换为ArrayBuffer类型的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值