如何使用 javascript 从可竞争的 div 元素中动态读取文本？

Question

点击 p 按钮进入上面的 div，一段将被附加，如下所示。

const newParagraph = document.querySelector('.paragraph');

newParagraph.addEventListener("click", () => {
    const editorMainBody = document.querySelector('.lesson-editing-editablecontent');
    const createNewParagraph = document.createElement("p");
    createNewParagraph.setAttribute("class", "new-paragraph"); 
    createNewParagraph.setAttribute("contenteditable", "true");
    createNewParagraph.innerHTML = "Paragraph";
    
    createNewParagraph.addEventListener('input', () => {
        
    })

    editorMainBody.appendChild(createNewParagraph);
});

现在我在内容可编辑的段落中给出的内容必须存储到一个变量中，并且该内容将作为 innerHTML 添加到该段落中。

我尝试了 mutations 和 clipboardAPI 我没有得到任何解决方案。请帮助我。

Answer 1

要使用 JavaScript 动态地从 contenteditable div 元素中读取文本，您可以使用元素的

textContent

或

innerHTML

属性。

举个例子：

const contentEditableDiv = document.querySelector('.editable');
contentEditableDiv.addEventListener('input', () => {
  const text = contentEditableDiv.textContent; // or contentEditableDiv.innerHTML
  console.log(text);
});

在这个例子中，我们选择了一个带有类名

'editable'

的contenteditable div元素，并为'input'事件添加了一个事件监听器。每当用户在 div 中键入内容时，都会触发事件侦听器，我们可以使用

textContent

或

innerHTML

属性获取 div 的当前文本内容，具体取决于我们是否要包含任何可能的 HTML 标记存在于内容中。然后我们将文本记录到控制台，但您可以将其存储在变量中或以其他方式使用它。