Wie man eine H1-text innerhalb eines div-durch eine omouseover Ereignis und innerHTML-Eigenschaft

Ich versuche zu schreiben, den Inhalt meiner H1 innerhalb eines div, wenn ich mit der Maus über die H1, aber nur bekommen [Objekt HTMLHeadingElement], nicht den text selbst. Ich bin ein total Anfänger und ich versuche es mit der innerHTML-Eigenschaft. Vielen Dank Euch allen!

HTML code:

<h1 id="phrase" onmouseover="writeInDiv2()">Hi all</h1>

JavaScript code:

var text = document.getElementById("phrase");

function writeInDiv2(){
    if(div2.style.display != "none"){
        div2.innerHTML = text;
    }
}
InformationsquelleAutor Naima | 2013-04-01
  1. 6

    Haben Sie drei Optionen, um die text-Inhalte:

    //Webkit, Mozilla, Opera (and other standards-compliant) browsers
var text = document.getElementById("phrase").textContent;

//Microsoft Internet Explorer (though this might have changed in IE 10)
var text = document.getElementById("phrase").innerText;

//Possibly works, though assumes the h1 contains only a text-node
var text = document.getElementById("phrase").firstChild.nodeValue;

    Für die Effizienz, mit der folgenden HTML-Code:

    <h1 onmouseover="writeInDiv2(this, 'div2')">Hi all</h1>
<h1 onmouseover="writeInDiv2(this, 'div2')">Another message</h1>
<div id="div2"></div>

    Ich würde vorschlagen:

    function writeInDiv2(el, textInto){
    var div2 = textInto.nodeType === 1 ? textInto : document.getElementById(textInto),
        text = el.textContent ? el.textContent : el.innerText;
    while (div2.firstChild){
        div2.removeChild(div2.firstChild);
    }
    div2.appendChild(document.createTextNode(text));
}

    JS Fiddle demo.

    • Vielen Dank, David! Ich muss schauen ruhig Ihre Lösung, weil ich bin ein Anfänger, aber ich habe in JS Fiddle, dass es perfekt funktioniert. Ich bin wirklich dankbar für deine ausführliche Antwort.
    • Vielen Dank textContent für mich gearbeitet.
    InformationsquelleAutor David Thomas
  2. 1

    Versuchen div2.innerHTML = text.innerHTML;

    InformationsquelleAutor miorel
Schreibe einen Kommentar