Kann mir jemand erklären: Elemente an ein Ziel anfügen und Elemente einem Ziel zuweisen?

Question

Ich machte zwei einfache Funktionen, die Sie in diesem link sehen können. Wenn auf die erste Schaltfläche geklickt wird, erstelle ich ein h3-Element, ich erstelle einen Text, ich füge den Text in das Element ein und ich füge das Element in eine ID mit dem Namen results ein. Aber, wenn Sie auf die zweite Schaltfläche klicken, mache ich ziemlich viel das gleiche, außer dass ich nach dem innerHTML der Ergebnisse gefragt habe und ich ihm das h3-Element zuweisen. Aber wenn ich das tue, bekomme ich "[object HTMLHeadingElement]". Ich habe mich gefragt, warum ich diese Antwort erhalten, obwohl ich das Gefühl, dass sie beide das gleiche tun

HTML:

<button id="click"> 
Click 
</button> 
<button id="click2"> 
Click 2 
</button> 
<div id="results"> 
Hello 
</div> 

Javascript:

document.getElementById('click').onclick = function() 
{ 
var a = document.createElement('h3'); 
var b = document.createTextNode('This is some text!'); 
a.appendChild(b); 
document.getElementById('results').appendChild(a); 
} 

document.getElementById('click2').onclick = function() 
{ 
var a = document.createTextNode('This is some other text'); 
var b = document.createElement('h3'); 
var c = ""; 
b.appendChild(a); 
c +=b 

document.getElementById('results').innerHTML = c; 

} 

Answer 1

Wenn Sie versuchen, eine object zu konvertieren In einem string Wert wird seine toPrimitive() Methode intern aufgerufen und die Zeichenfolgedarstellung der object zurückgegeben. In unserem Fall wäre die String-Repräsentation des Knotenobjekts "[object HTMLHeadingElement]". Das wird also als innerHTML des Elements #results zugewiesen.

Schließlich, wenn Sie die Roh-HTML-Zeichenfolge eines Elements extrahieren möchten, müssen Sie auf seineEigenschaft zugreifen. Die Lösung in Ihrem Fall ist also, das outerHTML des erstellten Elements zu erhalten und es dem Ziel innerHTML zuzuordnen.

document.getElementById('results').innerHTML = b.outerHTML; 

Und Ihre vollständige Code wäre,

document.getElementById('click2').onclick = function() { 
    var a = document.createTextNode('This is some other text'); 
    var b = document.createElement('h3'); 
    b.appendChild(a); 
    document.getElementById('results').innerHTML = c.outerHTML; 
}