关于jQuery html()，attr()和val() [英] about jQuery html(), attr() and val()
问题描述
我想通过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>
jQuery像
<!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>
，.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内容.
I want to copy some DOM nodes by html() method. I use val() to modify the input value, then use html() to copy the input node, but the value of the copied input is old!! When I use attr() to modify the input value, then copy it by html(), it looks like 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>
jQuery implements .html(), .attr() and .val() like,
.html() -
element.innerHTML();.attr(x, y) -
element.setAttribute(x, y);.val(x) -
element.value = x;
When you run .html() after you set the value with .val(), you basically just copy the entire element's inner HTML with its not-updated value attribute like (in your sample),
<input type="text" value="1">
And that's why the value would still be 1.
By changing the value with .val() after page load, does not update the attribute value in your input. Even for the element above, if you run,
$('input').val('2'); // <input type="text" value="1">
But if you run with .attr(),
$('input').attr('2'); // <input type="text" value="2">
Note that .html() gets the exact HTML contents of the element.
这篇关于关于jQuery html()，attr()和val()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
