javascript [对象 HTMLParagraphElement] 问题

标签 javascript html

Javascript 编程新手
我想从 textarea 获取文本并添加 html 段落标签,但我在 html 中遇到问题
[对象 HTMLParagraphElement]

const textArea = document.querySelector("#textAreag");
const edit = document.querySelector(".buttonEdit");
var itemss = document.querySelector(".items");

function action() {
  let itemvalue = textArea.value;
  var addPTag = document.createElement("p");
  var pValue = document.createTextNode(itemvalue);
  addPTag.appendChild(pValue);
  console.log(addPTag);
  itemss.innerHTML = addPTag;
}
edit.addEventListener("click", action, false);
<!DOCTYPE html>
<html lang="en-US" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Online To Do List</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <section class="MainHtmlHeading">
    <textarea id="textAreag" name="EditableArea" rows="2" cols="80"></textarea>
    <button class="buttonEdit" type="button" name="button">Edit</button>
  </section>

  <h1>To Do List</h1>
  <section class="items">

  </section>
</body>

</html>

最佳答案

使用appendChild将段落添加到该部分。当您分配给 innerHTML ,值应该是 HTML 字符串,而不是 DOM 元素。

const textArea = document.querySelector("#textAreag");
const edit = document.querySelector(".buttonEdit");
var itemss = document.querySelector(".items");

function action() {
  let itemvalue = textArea.value;
  var addPTag = document.createElement("p");
  var pValue = document.createTextNode(itemvalue);
  addPTag.appendChild(pValue);
  console.log(addPTag);
  itemss.appendChild(addPTag);
}
edit.addEventListener("click", action, false);
<!DOCTYPE html>
<html lang="en-US" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Online To Do List</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <section class="MainHtmlHeading">
    <textarea id="textAreag" name="EditableArea" rows="2" cols="80"></textarea>
    <button class="buttonEdit" type="button" name="button">Edit</button>
  </section>

  <h1>To Do List</h1>
  <section class="items">

  </section>
</body>

</html>

关于javascript [对象 HTMLParagraphElement] 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64826901/

相关文章:

javascript - 如何向指令添加 bool 属性?

javascript - 有谁知道为什么会出现数学和本地存储的问题?

javascript - 如何定位 svg 图像的一部分

php - 使用 PHP 缓存 HTML 输出

javascript - 表单组件.html :8 ERROR TypeError: Cannot read property 'userName' of undefined

javascript - 使用 select 更改单选按钮

html - Swift Vapor Leaf 在变量中传递 html

javascript - 通过 ReactJS 使用 MaterializeCSS 显示 HTML 元素

javascript - 如何删除 JavaScript location.pathname 返回值中的 "/"

javascript - 并排和水平对齐两个div