javascript 将文本值输入到 div 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28845037/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Input text value into a div?
提问by Mark D
Say I have this text box:
假设我有这个文本框：
<input type="text" id="myText" placeholder="Enter Name Here">
Upon pressing a button, I would like to send the value entered into this div:
按下按钮后，我想发送输入到此 div 中的值：
<div id="text2"></div>
I'm not entirely sure how to do this. Do I create a function and call it to the div? How would I do that?
我不完全确定如何做到这一点。我是否创建一个函数并将其调用到 div？我该怎么做？
Could someone clear this up for me? Thanks.
有人可以帮我解决这个问题吗？谢谢。
回答by Tommy Filliater
Add an onclick to your button:
添加一个 onclick 到您的按钮：
<input type="button" id="somebutton" onclick="addText()">
Then write the javascript:
然后编写javascript：
function addText()
{
document.getElementById('text2').innerHTML = document.getElementById('myText').value;
}
回答by Stephn_R
Solution using onclick event:
使用 onclick 事件的解决方案：
<input type="text" id="myText" placeholder="Enter Name Here">
<div id="text2"></div>
<button id="copyName" onclick="document.querySelector('#text2').innerHTML = document.querySelector('#myText').value" value="Copy Name"></button>
JSFiddle: http://jsfiddle.net/3kjqfh6x/1/
JSFiddle：http: //jsfiddle.net/3kjqfh6x/1/
回答by edu_
You can manipulate the content inside the div from javascript code. Your button should trigger a function (using the onclick event), which would access the specific div within the DOM (using the getElementById function) and change its contents.
您可以从 javascript 代码操作 div 内的内容。您的按钮应该触发一个函数（使用 onclick 事件），该函数将访问 DOM 中的特定 div（使用 getElementById 函数）并更改其内容。
Basically, you'd want to do the following:
基本上，您需要执行以下操作：
<!DOCTYPE html>
<html>
<script>
function changeContent() {
document.getElementById("myDiv").innerHTML = "Hi there!";
}
</script>
<body>
<div id="myDiv"></div>
<button type="button" onclick="changeContent()">click me</button>
</body>
</html>
回答by vigneshv
Mark D,
You need to include javascript to handle the button click, and in the function that the button calls, you should send the value into the div. You can call $("#myText").val()to get the text of the text box, and $("#txtDiv").text(txtToAppend)to append it to the div. Please look at the following code snippet for an example.
Mark D，你需要包含javascript来处理按钮点击，并且在按钮调用的函数中，你应该将值发送到div中。您可以调用$("#myText").val()以获取文本框的文本，并将$("#txtDiv").text(txtToAppend)其附加到 div。请查看以下代码片段以获取示例。
function submitTxt() {
$("#txtDiv").text($("#myText").val())
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myText" placeholder="Enter Name Here">
<button onclick = "submitTxt()"> Submit </button>
<div id="txtDiv"> </div>回答by StackSlave
HTML could be:
HTML 可以是：
<input type='text' id='myText' placeholder='Enter Name Here' />
<input type='button' id='btn' value='click here' />
<div id='text2'></div>
JavaScript should be external:
JavaScript 应该是外部的：
//<![CDATA[
var pre = onload; // previous onload? - window can only have one onload property using this style of Event delegation
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
var text2 = E('text2'); // example of Element stored in variable
E('btn').onclick = function(){
text2.innerHTML = E('myText').value;
}
}
//]]>
回答by Ron Sims II
I would recommend using a library like jQuery to do this. It would simplify the event handling and dom manipulation. None the less, I will include vanilla JS and jQuery examples.
我建议使用像 jQuery 这样的库来做到这一点。它将简化事件处理和 dom 操作。尽管如此，我将包括 vanilla JS 和 jQuery 示例。
Assuming the HTML in the body looks like this:
假设正文中的 HTML 如下所示：
<form>
<input id="myText" type="text" placeholder="Enter Name Here">
<br>
<input type="submit" id="myButton">
</form>
<div id="text2"></div>
The Vanilla JS example:
Vanilla JS 示例：
//Get reference to button
var myButton = document.getElementById('myButton');
//listen for click event and handle click with callback
myButton.addEventListener('click', function(e){
e.preventDefault(); //stop page request
//grab div and input reference
var myText = document.getElementById("myText");
var myDiv = document.getElementById("text2");
//set div with input text
myDiv.innerHTML = myText.value;
});
When possible avoid using inline onclickproperty, this can make your code more manageable in the long run.
尽可能避免使用内联onclick属性，从长远来看，这可以使您的代码更易于管理。
This is the jQuery Version:
这是 jQuery 版本：
//Handles button click
$('#myButton').click(function(e){
e.preventDefault(); //stop page request
var myText = $('#myText').val(); //gets input value
$('#text2').html(myText); //sets div to input value
});
The jQuery example assumes that you have/are adding the library in a script tag.
jQuery 示例假定您已/正在将库添加到脚本标记中。
