将 HTML 元素插入 div 元素？答案

【问题标题】：Inserting HTML elements into a div element?将 HTML 元素插入 div 元素？
【发布时间】：2011-04-05 18:19:40
【问题描述】：

我的页面上有一个 DIV 元素，我想知道在用户按下按钮后是否可以将一些 html 元素插入到 div 中。基本上，我希望 DIV 元素一开始是空的，并且只有在用户单击按钮后才加载内容。

我知道我可以通过在 JavaScript/jQuery 中创建元素然后将它们插入到 DIV 中来做到这一点，但是我宁愿能够创建一些标准的 HTML 代码然后加载整个东西，这样可以节省很多时间给我。

例如，如何将以下 html 标记插入到 div 中？

<label>Name: <label><input id="iptName"></input>  
<label>Age: <label><input id="iptAge"></input>  
<button>Click Me</button>

任何想法，顺便说一句，如果这有助于创建解决方案，我会使用 JQuery。

【问题讨论】：

标签： javascript jquery html dom

【解决方案1】：

听起来您想使用模板。在 jQuery 中有多种方法可以做到这一点，但它基本上涉及您创建模板，将其绑定到数据，然后将其插入到您的元素中。

$('#myDiv').append($('#myTemplate').tmpl(someData))

【讨论】：

【解决方案2】：

您可以只在页面上隐藏 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>

【讨论】：

根据使用情况，使用 .toggle() 而不是 .show() 将在按钮单击时交替显示/隐藏该 div。

【解决方案3】：

div.innerHTML = '<label>Name: <label><input id="iptName"></input><label>Age: <label>input id="iptAge"></input><button>Click Me</button>';

提高可读性：

div.innerHTML = [
    '<label> Name: <input id="iptName"> <label>',
    '<label> Age: <input id="iptAge"> <label>',
    '<button> Click Me </button>'
].join('');

【讨论】：

原始问题并没有说明使用 asp.net webforms 做这个服务器端
@Stone 什么 asp.net 网络表单？

【解决方案4】：

$('#myDiv').html(...);   // your HTML text here

【讨论】：

【解决方案5】：

试试Jnerator:

var jtag = $j.tagList([
    $j.label({ 'for': 'iptName', child: 'Name: ' }),
    $j.inputText({ id: 'iptName' }),
    $j.label({ 'for': 'iptAge', child: 'Name: ' }),
    $j.inputText({ id: 'iptAge' }),
    $j.button({ child: 'Click Me' })
]);
tagContainer.innerHTML = jtag.html();

Here is example

【讨论】：

【解决方案6】：

<div id="local"></div><button id="buttonAction">CLICK HERE</button>

你可以

<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>

或

<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>

或使用 JAVASCRIPT...

document.getElementById("local").innerHTML = '<input type="text" size="15" id="textFieldname">';

ATTRIB .html FROM JQUERY 是 JAVASCRIPT 中的 innerHTML！

如果您使用 JAVASCRIPT，您可以将 onclick action 设置为对象并创建一个函数。

查看运行示例http://jsfiddle.net/rogeriodemoraes/tcb3e2of/

【讨论】：

按照示例操作，按需使用

【解决方案7】：

$('button').click(function(){$('div').html('Stuff to be inserted into DIV');});

【讨论】：