关于 jQuery html()、attr() 和 val()答案

【问题标题】：about jQuery html(), attr() and val()关于 jQuery html()、attr() 和 val()
【发布时间】：2016-06-24 02:41:19
【问题描述】：

我想通过 html() 方法复制一些 DOM 节点。我用val()修改输入值，然后用html()复制输入节点，但是复制输入的值是旧的！！当我使用 attr() 修改输入值，然后通过 html() 复制它时，它看起来像 RIGHT！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>

<p id="con1"><input type="text" value="1"></p>
<p id="con2"></p>

<button onclick="doTest1()">test1</button>
<button onclick="doTest2()">test2</button>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
var doTest1 = function() {
  $("#con1 > input").val("2");
  $("#con2").html( $("#con1").html() );
};

var doTest2 = function() {
  $("#con1 > input").attr("value","2");
  $("#con2").html( $("#con1").html() );
};
</script>
</body>
</html>

【问题讨论】：

请在问题中包含所有相关代码，而不是链接到外部来源。
对于一个没有代码的模糊问题立即获得两个支持？我闻到袜子木偶的味道。
你基本上只是想克隆一个元素吗？
尝试 .clone() 而不是 .html()。 api.jquery.com/clone
尝试在追加后用val()更改值。

标签： javascript jquery

【解决方案1】：

jQuery 实现了.html()、.attr() 和.val() 之类的，

.html() - element.innerHTML();

.attr(x, y) - element.setAttribute(x, y);

.val(x) - element.value = x;

当您在使用.val() 设置值后运行.html() 时，您基本上只需复制整个元素的内部HTML 及其未更新的value 属性，如（在您的示例中），

<input type="text" value="1">

这就是为什么值仍然是1。

通过在页面加载后使用.val() 更改值，不会更新input 中的属性value。即使对于上面的元素，如果你运行，

$('input').val('2'); // <input type="text" value="1">

但如果你使用.attr() 运行，

$('input').attr('2'); // <input type="text" value="2">

请注意，.html() 获取元素的准确 HTML 内容。

【讨论】：

我认为这是正确的答案，但它似乎应该被视为一个 jQuery 错误。
完美答案！我完全理解。
@PHPglue 不，我认为这不应该是一个错误。在 js 中设置 element.value 不会更新文档中的 HTML 内容。而element.setAttribute 确实如此。
这等于说使用.html(contentHere) 方法不应该改变.html() 方法的输出。它只是改变了Element.innerHTML。

【解决方案2】：

请改用$.clone()。这是一个例子：

<button type="button" id="btnClone">Clone Input</button>
    <div id="inputContainer">
        <input id="myInput" type="text"/>
    </div>


$('#btnClone').click(function (e) {
    $('#myInput').clone().attr('id', 'myInput2').appendTo('#inputContainer');
})

注意克隆时，请注意要克隆的元素。例如，如果它有一个id 属性，它也会被克隆。这将导致 2 个单独的元素具有相同的 id。

https://api.jquery.com/clone/

【讨论】：

非常感谢！我明白了！
不要认为这回答了为什么会发生这种情况。我相信 OP 想知道为什么两个结果都不像 doTest2。
是的，但是 OP 也在询问如何解决他的实际问题，即克隆一个元素。

【解决方案3】：

var doTest1 = function() {
  $("#con1 > input").val("2");

  $("#con2").html($("#con1").html());
  console.log("con 1 val " + $("#con1 > input").val());
  console.log("con 1 attr " + $("#con1 > input").attr('value'));

  console.log("con 2 val " + $("#con2 > input").val());
  console.log("con 2 attr " + $("#con2 > input").attr('value'));
};

var doTest2 = function() {
  $("#con1 > input").attr("value", "2");
  $("#con2").html($("#con1").html());

  console.log("con 1 val " + $("#con1 > input").val());
  console.log("con 1 attr " + $("#con1 > input").attr('value'));

  console.log("con 2 val " + $("#con2 > input").val());
  console.log("con 2 attr " + $("#con2 > input").attr('value'));
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="con1">
  <input type="text" value="1">
</p>
<p id="con2"></p>

<button onclick="doTest1()">test1</button>
<button onclick="doTest2()">test2</button>

当您查看 at 控制台时，您可以看到即使使用 html 中的 .val() 方法更改显示的值，在第一个示例中 attr 值仍然是 1。所以当你使用.html()复制html时，它复制的是value='1'

在示例 2 中，当您使用 .attr() 更改值时，attr 值更改为 2，这就是为什么当您使用 .html() 复制它时会得到 value='2'

我希望演示有意义

【讨论】：