Javascript中创建和追加元素的奇怪问题！ [英] Weird Problem in Javascript in creating and appending elements!
问题描述
嘿，
创建一个脚本，用于从输入文本框中获取输入并将其发布到网页中。我在 Javascript 中所做的是创建一个新元素，将输入值添加为元素的文本节点，将文本节点附加到元素，然后将元素附加到另一个div。以下是代码：
Hey,
Am creating a Script for taking input from the Input Text Box and posting it in the webpage. What I am doing in Javascript is creating a new Element , adding the input value as the text node of the element , appending the text node to the element and then appending the element to another div. Here is the code :
<html>
<body>
<input type="text" id="typs" />
<input type="submit" value ="post " onclick="postf();">
<div id="container">
Posts
</div>
<script>
function postf() {
var postEle = document.createElement("p");
var postCon = document.getElementById("typs").value;
var postTxt = document.createTextNode(postCon);
var con = document.getElementById("container");
postEle.appendChild(postTxt);
con.appendChild(postEle);
}
</script>
</body>
</html>
此代码完美地接受输入并将其发布到网页！
但是当我们把< input>表单中的标签标签：
This code works perfectly taking the input and posting it to the webpage!
But when we put the <input> tags in a form tags :
<form name="input_form">
<input type="text" name="input_text" id="typs" />
<input type="submit" value ="post " önclick="postf();">
</form>
这不能正常工作。
当我们点击< b>提交按钮
输入并创建了元素，但它只是闪烁而去！只是闪烁而去！这很奇怪！
为什么只有当我们插入< form>时才会发生这种情况标签？
任何人都可以帮助我吗？
感谢你，
digi0ps
This doesnt work properly.
When we click the Submit Button
The input is taken and the elemented is created, But it just flashes and goes! Just Flashes and goes! It just weird!
Why is this happening only when we insert the <form> tag?
Can anyone help me?
Thanking You,
digi0ps
推荐答案
Button有两种类型。一个是提交按钮，另一个是普通按钮。
您已经使用了提交按钮，因为您指定了type =submit。如果您在表单标签内使用，则提交按钮的行为是将GET / POST数据（提交数据）发送到服务器端。
正如您所说的那样闪烁，它实际上回发并尝试将页面数据发送到表单标签的action属性中的指定页面。
参考 - HTML表单标签 [ ^ ]。
在W3Schools中给出的示例中，它将数据发布到demo_form。 asp页面，因为它在form标签的action属性中提到。
所以，为了避免这种情况，只需使用Normal Button，你的问题将得到解决。如下所示...
There are two types of Button. One is Submit Button and another is Normal Button.
You have used Submit Button as you have specifiedtype="submit". And the behaviour of Submit Button is to GET/POST data (submit data) to server side if you have used inside the form tags.
As you are saying it is flashing, it is actually posts back and tries to send data of the page to the specified page in action attribute of form tag.
Refer - HTML form Tag[^].
In the example given in W3Schools, it is posting data todemo_form.asppage as it is mentioned inside the action attribute of form tag.
So, to avoid this, just use Normal Button, your issue will be resolved. Like below...
<input type="button" value="post" önclick="postf();"></input>
这篇关于Javascript中创建和追加元素的奇怪问题！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
