如何使用HTML和Javascript向网页添加元素？ [英] How do I use HTML and Javascript to add elements to a webpage?
问题描述
我目前有一些HTML和Javascript，我正在使用它来尝试创建注释部分。
基本上，我想要完成的是或者是一个textarea（首选，当你按enter键提交，shift +输入新行）或input type = text，将文本框中的任何内容提交给表单下方的段落（或div，甚至另一个textarea）。 / p>
| ______您好__________ | < - Textbox
评论如下：
按Enter键
| ________________ | < - 文本框
以下评论：
你好
下面是我到目前为止的代码，但它不起作用：
<！DOCTYPE html>
< html>
< head>
< title>评论测试< / title>
< link href =mainstyles.css =stylesheet/>
< script src =mainjs.js>< / script>
< / head>
< body>
< form>
< input type =textonsubmit =postComment（this）/>
< p>
评论如下：
< / p>
< / form>
< / body>
< / html>
函数postComment（input）{
//变量
var form = input.parentElement;
//文本输入变量
var inputs = form.getElementsByTagName（input）;
//表单的值的变量，如果条件满足，则如果为真，则执行此操作else如果为假，则为
var response = inputs;
//用于根据响应创建段落元素和文本的变量
var node = document.createElement（p），
textNode = document.createTextNode（response）;
//将响应文本添加到段落中并将其附加到表单底部
node.appendChild（textNode）;
form.appendChild（node）;
/ p>
- 将
onsubmit处理程序移至表单元素。
getElementsByTagName返回一个集合。要获得输入的值，请使用inputs [0] .value。
Snippet
function postComment（input）{// var form = input.parentElement; //文本输入的变量var inputs = form.getElementsByTagName（input）; //变量为表单的值，如果条件满足，则如果为true，则执行此操作else如果为false var response = inputs [0] .value; //用于根据响应创建段落元素和文本的变量var node = document.createElement（p），textNode = document.createTextNode（response）; //向段落添加响应文本并将其附加到表单的底部node.appendChild（textNode）; form.appendChild（node）;}
< form onsubmit =postComment（this）; return false;> < input type =text> < p为H.以下评论：< / p>< / form>
以下是如何使用 Enter 和 Shift + Enter 标准使用textarea完成此操作的示例：
textarea {width：50％;身高：5em; float：left;} p {clear：both;}
<形式> < TextArea>< / textarea的> < input type =submit> < p为H.以下评论：< / p>< / form>
I currently have some HTML and Javascript I'm using to try and make a comment section.
Basically, what I want to accomplish is to have a form with either a textarea (preferred, and when you press enter it submits, shift+enter new line) or an input type=text to submit whatever is in the textbox to a paragraph (or div, or even another textarea) underneath the form.
|______Hello__________| <- Textbox
Comments Below:
Press Enter
|________________| <- Text box
Comments Below:
Hello
Here is the code i have so far but its not working:
<!DOCTYPE html>
<html>
<head>
<title>Comments Test</title>
<link href="mainstyles.css" rel="stylesheet" />
<script src="mainjs.js"></script>
</head>
<body>
<form>
<input type="text" onsubmit="postComment(this)" />
<p>
Comments Below:
</p>
</form>
</body>
</html>
function postComment(input) {
//Variable for the form
var form = input.parentElement;
//Variable for text input
var inputs = form.getElementsByTagName("input");
//Variable for the value of the form and if condition met "then" do this if true "else" this if false
var response = inputs;
//Variables for creating a paragraph element and text per response
var node = document.createElement("p"),
textNode = document.createTextNode(response);
//Adding the response text to the paragraph and appending that to the bottom of the form
node.appendChild(textNode);
form.appendChild(node);
}
You're close:
- Move the
onsubmithandler to the form element. getElementsByTagNamereturns a collection. To get the value of the input, useinputs[0].value.
Snippet
function postComment(input) {
//Variable for the form
var form = input.parentElement;
//Variable for text input
var inputs = form.getElementsByTagName("input");
//Variable for the value of the form and if condition met "then" do this if true "else" this if false
var response = inputs[0].value;
//Variables for creating a paragraph element and text per response
var node = document.createElement("p"),
textNode = document.createTextNode(response);
//Adding the response text to the paragraph and appending that to the bottom of the form
node.appendChild(textNode);
form.appendChild(node);
}
<form onsubmit="postComment(this); return false;">
<input type="text">
<p>
Comments Below:
</p>
</form>
Here's how to do this with a textarea, using your Enter and Shift+Enter criteria:
document.addEventListener("DOMContentLoaded", function(event) {
var form= document.querySelector('form');
var textarea= document.querySelector('textarea');
textarea.onkeypress= function(e) {
if(e.which === 13 && !e.shiftKey) {
this.parentNode.onsubmit(e);
}
}
form.onsubmit= function(e) {
var textarea = form.querySelector('textarea');
var response = textarea.value;
var node = document.createElement('div');
node.innerHTML= response.replace(/\n/g,'<br>') + '<hr>';
form.appendChild(node);
textarea.value= '';
e.preventDefault();
}
});
textarea {
width: 50%;
height: 5em;
float: left;
}
p {
clear: both;
}
<form>
<textarea></textarea>
<input type="submit">
<p>
Comments Below:
</p>
</form>
这篇关于如何使用HTML和Javascript向网页添加元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
