关于jQuery的html()、attr()和val()方法

Question

关于jQuery的html()、attr()和val()方法

3

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

<!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>

- lee shinwell

2

请在问题中包含所有相关的代码，而不是链接到外部资源。 - nateyolles

2

刚开始就有两个赞，对于一个没有代码的模糊问题？我闻到了马甲娃的味道。 - j08691

你基本上只是想克隆一个元素吗？ - mwilson

尝试使用 .clone() 而不是 .html()。https://api.jquery.com/clone/ - bassxzero

在追加后尝试使用 val() 改变该值。 - Shaunak D

jQuery的val()和attr('value')有什么区别？ - j08691

3个回答

1

使用$.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 属性，那么这个属性也会被克隆。这将导致两个拥有相同 id 的独立元素。

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

- mwilson

非常感谢！我明白了！ - lee shinwell

2

不要认为这回答了为什么会发生这种情况。我相信 OP 想知道为什么两个结果都不像 doTest2。 - StackSlave

是的，但 OP 也在询问如何解决他实际的问题，即制作元素的克隆。 - mwilson

0

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>

当您查看控制台时，可以发现即使使用HTML中的 .val()方法更改显示值，在第一个示例中仍然是1。因此，使用 .html()复制HTML时，复制的是 value='1'。

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

我希望演示有意义。

- guradio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- choz · Accepted Answer

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 内容。