📌  相关文章
📜  js 更改 contenteditable 值 - Javascript (1)

📅  最后修改于: 2023-12-03 15:32:23.573000             🧑  作者: Mango

JS 更改 contenteditable 值 - Javascript

在使用内容可编辑元素时，您可以使用JavaScript动态更改其值。Contenteditable属性可以让用户直接在页面上编辑文本，可以用于一些简单的文本编辑器中。

更改内容可编辑元素的值

要更改内容可编辑元素的值，需要通过JavaScript获取该元素，并使用JavaScript的innerHTML属性来更改其内容。

//获取Contenteditable元素
var editable = document.getElementById("editable");

//更改Contenteditable元素的内容
editable.innerHTML = "新的值";

使用innerHTML更改值时，要注意其和innerText或textContent的区别，innerHTML更改的是元素的html内容，而innerText或textContent更改的是纯文本内容。

示例

为了更好地理解，以下是一个简单的示例。此示例使用一个按钮更改内容编辑元素的值。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS 更改 contenteditable 值</title>
  </head>
  <body>
    <div contenteditable="true" id="editable">原始值</div>
    <button onclick="changeValue()">更改值</button>
    <script>
      function changeValue() {
        //获取Contenteditable元素
        var editable = document.getElementById("editable");

        //更改Contenteditable元素的内容
        editable.innerHTML = "新的值";
      }
    </script>
  </body>
</html>

在上面的示例中，我们使用getElementById获取editable元素，并使用innerHTML更改了它的值。

结论

以上是更改内容可编辑元素值的一些简单技巧。使用JavaScript可以通过更改其innerHTML属性来实现更改内容可编辑元素的值。尽管这很简单，但这是Web开发中必不可少的一部分。