jquery .html() 函数杀死一切答案

【问题标题】：jquery .html() function kills everything elsejquery .html() 函数杀死一切
【发布时间】：2012-11-30 15:20:15
【问题描述】：

我试图将 2 个变量合二为一，这是经典的书籍方式

a = 1;
b = "bla";
c = a + b;

但是，当其中一个变量，有 html() jquery 函数时，结果只有这个变量，仅此而已。为什么是这样？在这种情况下我该怎么办？

所有的 JS 代码

    $("#target").click(function() {
$('#myTable tr:last').after('<tr><td>Bla</td><td><div class="remove">REMOVE</div></td></tr>');
});
$("#myTable").on('click', '.remove', function(event) {
  $(this).parent().parent().remove();
});

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  $(".result").html(output);
});

相关代码：

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  $(".result").html(output);
});

html 输出仅打印表格内容，而不打印其他变量。组合 vars 确实有效，但如果有 html()。在其中一个中，仅打印此 var。这是什么资源？

http://jsbin.com/ucopun/9/edit

要查看它不起作用，请在输入中输入内容并单击结果。

【问题讨论】：

RTM -> api.jquery.com/html

标签： jquery html var

【解决方案1】：

.html() 从 DOM 节点设置和检索 HTML；不要与 .text() 混淆，后者处理节点内的文本值。

你可能想要做这样的事情：

 var input = '<div>' + $("input").val() + 'www</div>';
 var table = $("#myTable").html();
 var output = input + '<table>' + table + '</table>;

坦率地说，我认为您的 HTML 太复杂了；你为什么把div放在表格里？？您可以减少代码并使其仅与 div 一起使用。

【讨论】：

div 只是一个切换元素，也可能是一个锚标签。这个例子有效，但是 html() 中的 html 为何不显示？

【解决方案2】：

问题是 $("#myTable").html(); 返回您的表格 html 没有开始和结束标签 <table></table> 所以当您稍后将文本连接到截断的 html 表格代码时，浏览器会解释您的文本属于表格但不知道如何渲染它。

简单的解决方案是输出一个正确的表格，以便正确显示文本并与表格分开，因此，只需替换以下行：

var table = $("#myTable").html();

对于这个：

var table = '<table>' + $("#myTable").html() + '</table>';

【讨论】：

【解决方案3】：

您在输出变量中输入的所有文本都在那里，问题是$(".result").html(output) 忽略了非 HTML 内容。通过添加此警报向自己证明：

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  alert(output);
  $(".result").html(output);
});

【讨论】：

【解决方案4】：

查看源代码（或在警告框中显示output 的值）。

$("button").click(function() {
  var input = $("input").val();
  var table = $("#myTable").html();
  var output = input + "www" + table;
  alert (output);
  $(".result").html(output);
});

您可以看到输入字段中的值，并且“www”正在添加到结果 div 的 html 中；它只是没有被渲染。

考虑使用 id 属性而不是类来为您的 .html(output) 定义目标：

<div id="result">...</div>

和

$("#result).html(output);

【讨论】：