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

如何在 contenteditable div 中的特定位置添加/插入/更新文本?

在 contenteditable div 中的特定位置添加/插入/更新文本的方法有很多种,以下是一些常用的方法:

  1. 使用 innerHTML

通过使用 innerHTML,可以在 contenteditable div 中直接插入 HTML 代码。例如:

代码语言:txt
复制
<div id="content" contenteditable="true">
  <p>Hello, world!</p>
</div>

<script>
  var content = document.getElementById("content");
  content.innerHTML = "<p>Hello, world!</p>";
</script>

这种方法比较简单,但是存在一些安全隐患,例如容易受到 XSS 攻击等。

  1. 使用 textContent

textContent 属性是 contenteditable 元素的一个只读属性,表示元素的文本内容,不包括 HTML 标记。可以使用 textContent 来插入文本。例如:

代码语言:txt
复制
<div id="content" contenteditable="true">
  <p>Hello, world!</p>
</div>

<script>
  var content = document.getElementById("content");
  content.textContent = "Hello, world!";
</script>

这种方法比 innerHTML 更安全,但是插入的文本不会包含 HTML 标记。

  1. 使用 createTextRange

createTextRange 方法可以创建一个文本选区,可以使用 select 方法来插入文本。例如:

代码语言:txt
复制
<div id="content" contenteditable="true">
  <p>Hello, world!</p>
</div>

<script>
  var content = document.getElementById("content");
  var range = document.createRange();
  range.selectNodeContents(content);
  range.collapse(false);
  var selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
  content.focus();
</script>

这种方法可以在 contenteditable div 中插入文本,并且可以插入多行文本。

以上是一些常用的方法,当然还有其他的方法可以插入文本,具体可以根据实际情况选择。需要注意的是,在插入文本之前,需要先选择要插入的位置,可以使用 select 方法来选择。另外,在插入文本之后,需要将文本设置为 focus 状态,以便用户可以编辑。

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

相关·内容

没有搜到相关的视频

领券