webentwicklung-frage-antwort-db.com.de

So fügen Sie einem vorhandenen div mit Jquery Text hinzu

Ich möchte einem vorhandenen Div Text hinzufügen, wenn ich auf den Button mit der ID #add klicke. Das funktioniert aber nicht. 

Hier mein Code: 

$(function () {
  $('#Add').click(function () {
    $('<p>Text</p>').appendTo('#Content');
  });
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div id="Content">
    <button id="Add" />
 </div>

Ich hoffe ihr könnt mir helfen. 

jqueryhtmltextadd
50
JSt

Sie müssen den Schaltflächentext definieren und über einen gültigen HTML-Code für die Schaltfläche verfügen. Ich würde auch vorschlagen, .on für den Click-Handler der Schaltfläche zu verwenden

$(function () {
  $('#Add').on('click', function () {
    $('<p>Text</p>').appendTo('#Content');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="Content">
    <button id="Add">Add Text</button>
</div>

Ich würde auch sicherstellen, dass sich die Jquery direkt vor dem schließenden </body>-Tag auf der Seite befindet. Wenn Sie dies tun, müssen Sie nicht alles in $(function einwickeln, aber ich würde das trotzdem tun. Wenn Sie Ihr Javascript am Ende der Seite geladen haben, wird der Rest der Seite geladen, und Ihr Javascript ist irgendwo langsamer.

52
bretterer

Html

<div id="Content">
<button id="Add" value="Add" />
</div>

wenn Sie nach dem Buttom wollen

$(function () {
  $('#Add').click(function () {
    $('#Content').after('<p>Text</p>');
  });
});

oder davor

$(function () {
  $('#Add').click(function () {
    $('#Content').before('<p>Text</p>');
  });
});
9
Zach dev

Ihre HTML-Datei ist ungültig. button ist kein Null-Tag. Versuchen

<div id="Content">
   <button id="Add">Add</button>
</div>
5
Musa

Sehr leicht von meiner Seite: -

<html>
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $("input").click(function() {
            $('<input type="text" name="name" value="value"/>').appendTo('#testdiv');
        });

    });
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <div id="testdiv"></div>
    <input type="button" value="Add" />
</body>
</html>
0
Pavan

$(function () {
  $('#Add').click(function () {
    $('<p>Text</p>').appendTo('#Content');
  });
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <div id="Content">
    <button id="Add">Add<button>
 </div>

0
prakash tyata

wir können dies auf eine einfachere Weise tun, z. B. indem Sie eine Funktion über die Schaltfläche hinzufügen und beim Anklicken diese Funktion zum Anhängen aufrufen.

<div id="Content">
<button id="Add" onclick="append();">Add Text</button>
</div> 
<script type="text/javascript">
function append()
{
$('<p>Text</p>').appendTo('#Content');
}
</script>
0
Amit Joshi