javascript 将 HTML 元素插入 div 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5556528/
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
Inserting HTML elements into a div element?
提问by Tom Green
I have a DIV element that is on my page, I would like to know whether i can insert some html elements into the div after a button is pushed by the user. Basically, i want the DIV element to start out empty and only load the contents once a button is clicked by the user.
我的页面上有一个 DIV 元素，我想知道是否可以在用户按下按钮后将一些 html 元素插入到 div 中。基本上，我希望 DIV 元素开始时为空，并且仅在用户单击按钮后才加载内容。
I know i can do this by creating elements in JavaScript/jQuery and then insert them into the DIV, however i would rather be able to create some standard HTML code and then have the entire thing loaded, It would save a lot of time for me.
我知道我可以通过在 JavaScript/jQuery 中创建元素然后将它们插入到 DIV 中来做到这一点，但是我宁愿能够创建一些标准的 HTML 代码然后加载整个东西，这会为我节省很多时间.
Like, for example, how would it be possible to insert the following html markup into a div?
例如，如何将以下 html 标记插入到 div 中？
<label>Name: <label><input id="iptName"></input>
<label>Age: <label><input id="iptAge"></input>
<button>Click Me</button>
Any ideas, btw, im using JQuery if that helps in creating a solution.
任何想法，顺便说一句，如果这有助于创建解决方案，我正在使用 JQuery。
回答by Bobby Borszich
You can just have the HTML on the page and hidden, then upon clicking a button just show that HTML.
您可以将 HTML 放在页面上并隐藏，然后在单击按钮时仅显示该 HTML。
<div id="container-div">
<div id="hidden-html" style="display:none;">
<label>Name: <label><input id="iptName"></input>
<label>Age: <label><input id="iptAge"></input>
<button>Click Me</button>
</div>
</div>
<a href="#" onclick="$('#hidden-html').show(); return false;"> Show </a>
回答by Tejs
Sounds like you want to use templating. There are multiple ways of doing that in jQuery, but it basically involves you creating your template, binding it to data, and then inserting it to your element.
听起来您想使用模板。在 jQuery 中有多种方法可以做到这一点，但它基本上涉及您创建模板，将其绑定到数据，然后将其插入到您的元素中。
$('#myDiv').append($('#myTemplate').tmpl(someData))
回答by ?ime Vidas
div.innerHTML = '<label>Name: <label><input id="iptName"></input><label>Age: <label>input id="iptAge"></input><button>Click Me</button>';
Improved readability:
提高可读性：
div.innerHTML = [
'<label> Name: <input id="iptName"> <label>',
'<label> Age: <input id="iptAge"> <label>',
'<button> Click Me </button>'
].join('');
回答by Alnitak
$('#myDiv').html(...); // your HTML text here
回答by Berezh
回答by Rogerio de Moraes
<div id="local"></div><button id="buttonAction">CLICK HERE</button>
YOU CAN
你可以
<SCRIPT>
// FOR ALL BUTTON / WITH ":" and TYPE OBJECT ALL BUTTON HAVE FUNCTION
$(":button").click(function() {
$("#local").html('<input type="text" size="15" id="textFieldname">');
$("#textFieldname").val('GREAT!');
});
</SCRIPT>
OR
或者
<SCRIPT>
// AND WITH "#" AND NAME ONLY ONE BUTTON HAVE THIS FUNCTION
$("#buttonAction").click(function() {
$("#local").html('<input type="text" size="15" id="textFieldname">');
$("#textFieldname").val('GREAT!');
});
</SCRIPT>
OR USE JAVASCRIPT...
或使用 JAVASCRIPT...
document.getElementById("local").innerHTML = '<input type="text" size="15" id="textFieldname">';
ATTRIB .html FROM JQUERY is innerHTML in JAVASCRIPT!
ATTRIB .html FROM JQUERY 是 JAVASCRIPT 中的 innerHTML！
If you use JAVASCRIPT, you can set onclick actioninto object and create a function.
如果您使用 JAVASCRIPT，您可以将onclick 操作设置为对象并创建一个函数。
SEE A EXAMPLE RUNNING http://jsfiddle.net/rogeriodemoraes/tcb3e2of/
回答by Jonathan
$('button').click(function(){$('div').html('Stuff to be inserted into DIV');});
