So erstellen Sie Text und fügen Text an ein vorhandenes Element an, z. leere Spannweite?

Question

Überall, wo ich gesucht habe, habe ich nur Möglichkeiten gefunden, einen Textknoten nach dem Erstellen eines neuen Elements anzuhängen. Zum Beispiel werden sie ein neues Absatzelement (p) erstellen und anschließend den Textknoten an diesen neuen Absatz anhängen. Aber ich möchte einen Textknoten zu einem bestehenden Element hinzufügen (in meinem Fall eine leere Spanne).

Link zu Code zum Beispiel und Klärung http://pastebin.com/K1EBMr4Z

<span class="span"></span> <!-- append textnode here --> 

function newFunction(){ 
    var textnode = document.createTextNode("OK"); 

    // Append my `textnode` to the empty span here 
} 

Vielen Dank im Voraus

Answer 1

Wie im Kommentar erwähnt, können Sie hinzufügen der Textknoten als untergeordnetes Element der Spannweite mit der Methode appendChild().

Für Text können Sie auch einfach die innerHTML Eigenschaft der Spannweite festlegen.

Beide Beispiele in einem Behälter:

function newFunction(){ 
    var span = document.getElementById('my-span'); 
    var otherSpan = document.getElementById('my-other-span'); 

    span.innerHTML = 'Yo this is text'; 

    var textNode = document.createTextNode("OK"); 
    otherSpan.appendChild(textNode); 
}; 

newFunction(); 

https://jsfiddle.net/9pmhan8L/1/

Answer 2

Es ist ganz einfach. Verwenden Sie die appendChild-Methode.

function newFunction(){ 
    var textnode = document.createTextNode("OK"); 
    document.querySelector(".span").appendChild(textnode); 
} 

Answer 3

Wenn Sie die Spanne eine ID geben, können Sie es mit document.getElementById() und dann innerhalb dieses Element die HTML ändern. Here's ein Link zu einer SO, die das tut. Hier sind auch einige Dokumente für innerHTML und getElementByID.

Answer 4

Warum nicht jQuery verwenden:

$('span').text('text'); 

oder

$('span').html('<p>text</p>'); 

Wenn Sie ihn nicht verwenden, zu verwenden:

document.getElementsByTagName('span').innerHTM = '<p>text</p>'; 

Answer 5

Sie müssen den Knoten Sie die textNode zum ersten anhängen möchten. Hängen Sie dann den textNode an den ausgewählten Knoten an (in Ihrem Fall das Element .span).

<span class="span"></span> 

function newFunction(){ 
    var textnode = document.createTextNode("Hello World!"); 

    // Select your existing element 
    var empty_span = document.querySelector('.span'); 

    // Append the element 
    empty_span.appendChild(textnode); 
} 

newFunction(); 

Example jsFiddle auch.