Hinzufügen von Text zu einem vorhandenen Textelement in JavaScript über DOM

Question 1

Ich versuche herauszufinden, wie man Text zu a hinzufügt p Etikett bzw h1 -Tag, das bereits einen Textknoten hat.

Zum Beispiel:

var t = document.getElementById("p").textContent;
var y = document.createTextNode("This just got added");

t.appendChild(y);

<p id="p">This is some text</p>

Dieser Code gibt einen Fehler aus appendChild ist keine Funktion. Die meisten Hilfeseiten erstellen zunächst a p Tag und fügen Sie dann den Text an.

Wie füge ich Text richtig zu einem bestehenden Textelement hinzu?

PS: Ich habe verwendet innerHTML vorher tun, aber zu Lernzwecken möchte ich es hier vermeiden.

Question 2

Der Grund dass appendChild ist keine Funktion, weil Sie sie auf der ausführen textContent von dir p Element.

Sie müssen stattdessen nur den Absatz selbst auswählen und dann Ihren neuen Textknoten daran anhängen:

var paragraph = document.getElementById("p");
var text = document.createTextNode("This just got added");

paragraph.appendChild(text);

<p id="p">This is some text</p>

Wenn Sie möchten, können Sie jedoch stattdessen einfach den Text selbst ändern (anstatt einen neuen Knoten hinzuzufügen):

var paragraph = document.getElementById("p");

paragraph.textContent += "This just got added";

<p id="p">This is some text</p>

Question 3

Anstatt ein Element anzuhängen, können Sie es einfach tun.

 document.getElementById("p").textContent += " this has just been added";

document.getElementById("p").textContent += " this has just been added";

<p id ="p">This is some text</p>

Question 4

Die Methode .appendChild() wird verwendet, um a hinzuzufügen neues Element KEINEN Text zu einem bestehenden Element hinzufügen.

Beispiel:

var p = document.createElement("p");
document.body.appendChild(p);

Bezug: Mozilla-Entwicklernetzwerk

Der Standardansatz dafür ist die Verwendung .innerHTML(). Wenn Sie jedoch eine alternative Lösung wünschen, können Sie versuchen, diese zu verwenden element.textContent.

Beispiel:

document.getElementById("foo").textContent = "This is som text";

Bezug: Mozilla-Entwicklernetzwerk

Dies wird jedoch nur in IE 9+ unterstützt

Question 5

Was ist damit.

var p = document.getElementById("p")
p.innerText = p.innerText+" And this is addon."

<p id ="p">This is some text</p>

Question 6

Löschen .textContent aus var t = document.getElementById("p").textContent;

var t = document.getElementById("p");
var y = document.createTextNode("This just got added");

t.appendChild(y);

<p id ="p">This is some text</p>

Question 7

   <!DOCTYPE html>
   <html>
   <head>
   <script   src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
   $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
   });

  });
 </script>
  </head>
 <body>

 <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>



 <button id="btn1">Append text</button>


</body>
</html>

Question 8

var t = document.getElementById("p").textContent;
var y = document.createTextNode("This just got added");

t.appendChild(y);

<p id="p">This is some text</p>