Question

我的页面上有一个DIV元素，我想知道在用户按下按钮后是否可以在div中插入一些html元素。基本上，我希望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，如果这有助于创建解决方案。

Answer 1

您可以在页面上显示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>

Answer 2

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

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

Answer 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('');

Answer 4

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

Answer 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

Answer 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">';

来自JQUERY的ATTRIB .html是JAVASCRIPT中的innerHTML！

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

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

Answer 7

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

将HTML元素插入div元素？

7 个答案: