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/