Question

我想通过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>

Answer 1

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

.html（） - element.innerHTML();

.attr（x，y） - element.setAttribute(x, y);

.val（x） - element.value = x;

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

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

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

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

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

但如果你使用.attr()，

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

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

Answer 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/

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

我希望这个演示有意义

关于jQuery html（），attr（）和val（）

3 个答案: