Question

我想在javascript中创建一个示例内容变量，其中包含一些带有特定值的html标记。当按下按钮时，如何将它放在div中。

例如：

这是我想要使用的内容：

var contentString = '<div id="info">'+
'<h2><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Info:</b></h2>'+
'<div id="bodyContent">'+ 
'<div style=width:220px;display:inline-block;>'+
'<p>&nbsp; Name: '+ this.name + '</p>' +
'<p>&nbsp; Last name: '+ this.last+ '</p>' +
'<p>&nbsp; 
'</div>'+
'</div>'+
'</div>'+
'</form>';

我想把它放进去：<div id=something"></div> 在javascript中我可以有类似的东西：

$("#button").on('click', function() {
// What to put in here?
});

Answer 1

如何在按下按钮时将其放入div中。

像这样：

$("#button").on('click', function() {
  $('#something').html(contentString);
});

有关html();

的更多信息

http://api.jquery.com/html/

Answer 2

如果我没有误解，那么这将有效：

$("#button").on('click', function() {
    $('#something').html(contentString);
});

当然，这确实假设你有一个id button的元素（虽然我假设你这样做，否则你就不会放jQuery）。

JS Fiddle demo

参考文献：

html()。

Answer 3

它是这样的：

$("#button").on('click', function() {
   $("#something").html(contentString);
});

Answer 4

你应该修改你的标记。你有不平衡的元素，你不能在字符串中有新的行而不逃避它。试试这个：

var contentString = '<div id="info">'+
'<h2><b style="text-indent: 40px">Info:</b></h2>'+
'<div id="bodyContent">'+ 
'<div style="width:220px;display:inline-block;">'+
'<p style="text-indent: 1em">Name: '+ this.name + '</p>' +
'<p style="text-indent: 1em">Last name: '+ this.last+ '</p>' +
'</div>';

请注意，我跳过 并将其替换为样式属性。不过，你真的应该把这些样式放在样式表中。

$("#button").on('click', function() {
 $('#something').html(contentString);
});

请记住，当按钮上的click事件触发时，不会评估contentString中的变量，这意味着this.name和this.last不会更改。您是否还需要在点击时更新这些值？

如何使用javascript写入div

4 个答案: