js写入指定html,js 指定位置插入html标签（可编辑div）

最新推荐文章于 2024-07-31 11:05:25 发布
最新推荐文章于 2024-07-31 11:05:25 发布
阅读量3.3k 收藏
点赞数
文章标签： js写入指定html
这篇博客介绍了如何使用JavaScript在指定位置插入HTML标签，实现内容修改留痕的功能。通过示例代码展示了在div元素中插入HTML的方法，并讨论了在前端实现内容修改记录的挑战。此外，还提到了在JS数组中插入元素的操作。
摘要由CSDN通过智能技术生成

demo效果如下：

458381403f7bade2e72e76c6859921fb.png

html代码部分如下：

js获取编辑框游标的位置

#Div1, #Div2

{

width: 500px;

height: 100px;

border: solid 1px black;

}

插入字符

dasdsadasdasdasd订阅dasdasdasdasdsadsa

$('#ddddd').click(function(){

document.getElementById('test').focus();

insertHtmlAtCaret('6655329d04c256092dca7eeeb196f3bd.gif');

})

function insertHtmlAtCaret(html) {

var sel, ra

最低0.47元/天 解锁文章
weixin_39937635
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js样式创建可编辑表格
qq_64975782的博客
12-12 1166
js实现可编辑表格，支持删除行，只读，编辑
如何在指定的地方插入html内容和文本内容
12-01
dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentText insertAdjacentHTML方法：在指定的地方插入html标签语句。 原型：insertAdjacentHTML(swhere,stext) 参数： swhere:指定插入html标签语句的地方，有四种值可以用： 1.beforeBegin:插入到标签开始前 2.afterBegin:插入到标签开始标记后 3.beforeEnd:插入到标签结束标记前 4.afterEnd:插入到标签结束标记后 stext:要插入的内容 例： 代码如下: var sHTML=”<input
用Javascript在编辑框和TextArea的光标处插入文字，支持连续插入
weixin_34037515的博客
02-23 83
为什么80%的码农都做不了架构师？>>> ...
蛇形填数
weixin_44764207的博客
10-05 319
描述 在n x n方针里填入1，2，……，nxn，要求填成蛇形。例如，n=4时方阵为： 10 11 12 1 9 16 13 2 8 15 14 3 7 6 5 4 实现代码 #include<stdio.h> #include<string.h> #define maxn 20 int a[maxn][maxn]; int main(){ int n, x, y, tot = 0; scanf("%d", &n); memset(a, 0, siz
利用JS动态插入HTML代码
最新发布
2301_79858914的博客
07-31 1158
在 JavaScript 中，有几种常用方法可以将 HTML 代码动态地插入到网页中。
js的动态插入指定位置的标签方法insertBefore，以及自定义insertAfter方法
开发路上的AZhe
07-28 4772
var mydiv = document.getElementById("mydiv");//目标元素 var divimg = document.createElement("div"); //新建一个div标签 divimg.classList.add("productInformation-img"); //给div定义一个类名 这里用来...
React：div可编辑后，点击按钮插入标签
QY_99的博客
08-25 1744
React：div可编辑后，点击按钮插入标签，contentEditable， 实现一个文本框，既可输入，有可插入标签。TextArea显然是不可的，它是文本输入框，想添加dom是不可以的，于是解决思路就想到了，给div添加属性contentEditable，变成可输入，实现一个编辑器。...
在指定节点插入html元素
ywzqzhangjiawei的博客
07-05 794
// 原始 js 在指定位置插入 html 元素 常用的函数: document.createElement()是在对象中创建一个对象、 appendChild() 、insertBefore() 通过 document.createElement() 创建一个元素，然后使用appendChild() 或 insertBefore() 把创建的元素插入到指定位置 ...
DIV+CSS+JS在HTML页面制作表格的思想
weixin_40726526的博客
04-13 1947
DIV+CSS+JS在HTML页面制作表格的思想 1.介绍 在如今的前后端分离的开发当中，前端页面技术要求也越来越高了。 因此就在这对自己对前端技术的理解做个简单的整理，方便日后查阅。本文章主要是介绍了如何制作表格的思想。阅读这文章，至少得了解div标签的特性，特别是可以抽象理解div标签的——块思想。还有选择器的知识也是很重要。 2.表格的结构拆分 首先，我的认为。一张基本的表格主要有俩个...
dom-insert-html:使用“insertAdjacentHTML”的 HTML 字符串 DOM 插入方法
07-04
dom-insert-html HTML 字符串 DOM 插入方法。 使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法： after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串。 append(element, string) : 将 HTML 字符串附加到元素。 prepend(element, string) : 将 HTML 字符串添加到元素中。 每个方法都接受： element {Element}: DOM 元素 string {String}：要插入的 HTML 字符串。 例子 var html = require ( 'dom-insert-html' ) ; var el =
html文本框自动赋值,js给文本框赋值 value与innerHTML
weixin_39588911的博客
06-03 1628
赋值操作：document.getElementById("testId").value="hello";value与innerHTML的区别上面的value也可以写成innerHTML要注意：有value属性的标签才能使用getElementById().value比如像12345这种没有value属性的标签就用getElementById().innerHTMLJS给文本框赋值后，在页面后台取...
html+css+js基础问答
qq_43751465的博客
08-26 5157
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
JS无限添加HTML到指定位置
qq_39702981的博客
03-25 2388
用JS把HTML添加到指定位置有两种写法，一种是用字符串，一种是用javascript中的方法 第一种： 用字符串写 <h2>利用JS无限添加一个相同部分</h2> <h5>第一种写法</h5> <%--有多少个相同的这里面的值就是几--%> <asp:HiddenField ...
JavaScript插入HTML方法
热门推荐
yangyang的专栏
02-25 1万+
参考文章：https://www.jianshu.com/p/f54897f689cf 传统方法 1.document.write方法 可以直接在需要插入的地方通过script标签插入 &amp;lt;body&amp;gt; &amp;lt;script&amp;gt; document.write(&quot;&amp;lt;p&amp;gt;This is inserted.&amp;lt;/p&amp;gt;&amp
可编辑div标签（图文混排需求）
AWDSDF的博客
04-04 398
可编辑div（图文混排）
原生js插入HTML元素
lplovewjm的博客
08-22 2551
方法，格式如下：根据id、className等找到这个元素，如果这个元素的id为a，2.afterbegin：在 element 元素的第一个子节点前面;3.beforeend：在 element 元素的最后一个子节点后面;1.beforebegin：在 element 元素的前面;4.afterend：在 element 元素的后面。如果需要多次判断插入，并且删除之前插入的元素，则可以用。比如我们想放在element元素后面，就可以这么写，
在js中加html_如何在 JS 中嵌入 HTML 代码
weixin_28901327的博客
01-30 2003
展开全部思路，在JS中定义要嵌入的e68a8462616964757a686964616f31333363373162html代码，然后通过js进行嵌入即可。functioninsert(){'定义代码varinsertText="anything";’从html的标签中取得要插入的id进行innerHTMLdocument.getElementById("insert").innerH...
js把标签div写入body指定位置中
05-05
你可以使用 JavaScript 中的 DOM 操作来将一个 `<div>` 标签写入到 `<body>` 中的指定位置。以下是一个简单的例子： HTML: ```html <body> <div id="myDiv">这是我的 div 标签</div> <div id="targetDiv">这是我的目标位置</div> </body> ``` JavaScript: ```javascript // 获取要插入的 div 元素 var newDiv = document.getElementById("myDiv"); // 获取要插入到的目标位置 var targetDiv = document.getElementById("targetDiv"); // 将 div 元素插入到目标位置之后 targetDiv.parentNode.insertBefore(newDiv, targetDiv.nextSibling); ``` 这个例子中，我们首先获取要插入的 `<div>` 元素和目标位置的 `<div>` 元素，然后使用 `insertBefore()` 方法将要插入的 `<div>` 元素插入到目标位置之后。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值