über jQuery html(), attr() und val()

Ich möchte einige DOM-Knoten nach html() Methode kopieren. Ich benutze val(), um den Eingabewert zu ändern, und dann html(), um den Eingabeknoten zu kopieren, aber der Wert der kopierten Eingabe ist alt !! Wenn ich attr() benutze, um den Eingabewert zu ändern, dann kopiere es mit html(), es sieht aus wie RECHTS!über jQuery html(), attr() und val()

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

Quelle

2016-06-24 lee shinwell

Bitte fügen Sie alle relevanten Code in der Frage, anstatt mit einer externen Quelle verknüpfen. – nateyolles

Zwei Upvotes auf Anhieb für eine vage Frage ohne Code? Ich rieche Sockenpuppen. – j08691

willst du im Prinzip nur ein Element klonen? – mwilson

jQuery implementiert .html(), .attr().val() und dergleichen,

.html() - element.innerHTML();

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

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

Wenn Sie .html() ausführen, nachdem Sie gesetzt kopieren Sie den Wert mit .val(), Sie im Grunde nur die mit ihrem inneren HTML gesamten Elemente nicht aktualisierte value Attribut wie (in der Probe) ,

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

Und das ist, warum der Wert noch 1 wäre.

Durch Ändern des Werts mit .val() nach dem Laden der Seite, wird das Attribut value in Ihrem input nicht aktualisiert. Auch für das Element oben, wenn Sie laufen,

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

Aber wenn Sie laufen mit .attr(),

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

Beachten Sie, dass .html() die genauen HTML-Inhalt des Elements wird.

Quelle

2016-06-24 02:58:21 choz

Ich denke, das ist die richtige Antwort, aber es scheint, dass es als ein jQuery-Bug betrachtet werden sollte. – PHPglue

Perfekte Antwort! Ich verstehe es vollständig. –

@PHPglue Nein, ich denke nicht, dass es ein Fehler sein sollte. Das Setzen eines 'element.value' in js aktualisiert den HTML-Inhalt im Dokument nicht. Während "element.setAttribute" tut. – choz

Verwenden Sie stattdessen $.clone(). Hier ein Beispiel:

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

HINWEIS Beim Klonen, seien Sie vorsichtig des Elements Sie klonen. Zum Beispiel, wenn es ein id Attribut hat, wird das auch geklont. Dies würde 2 separate Elemente mit der gleichen id ergeben.

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

Quelle

2016-06-24 02:51:48 mwilson

Vielen Dank! Ich hab es geschafft! –

Denken Sie nicht, das beantwortet, warum dies geschieht. Ich glaube OP möchte wissen, warum beide Ergebnisse nicht wie 'doTest2' aussehen. – PHPglue

Ja, aber OP fragt auch, wie man sein tatsächliches Problem löst, das einen Klon eines Elements erzeugt. – mwilson

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>

Wenn Sie die auf Konsole sehen Sie, dass selbst wenn die angezeigte Wert Änderung mit der Methode .val() in dem HTML-Code 1 im ersten Beispiel der attr Wert ist immer noch sehen.Also, wenn Sie die HTML mit .html() kopieren, was es kopiert ist value='1'

Während in Beispiel 2, wenn Sie den Wert ändern .attr() der attr Wert geändert 2 verwenden, warum, wenn Sie es .html() mit kopiert erhalten Sie die value='2'

Ich hoffe, die Demo ergab Sinn

Quelle

2016-06-24 03:02:28 guradio

über jQuery html(), attr() und val()

Antwort

Verwandte Themen