javascript - 如何使用javascript写入div

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);
});

当然，这确实假设你有一个带有idof的元素button（尽管我假设你有，否则你不会放那个 jQuery）。

JS 小提琴演示。

参考：

• 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);
});

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