Ich möchte ein Wort in einem Absatz einfärben, aber ich erstelle diesen Absatz mit TextNode und werde dann wie Text angezeigt.

Beispiel:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Node.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var t = document.createTextNode("Hello World <span style=\"color: #BA0000\">error</span> ");
  document.body.appendChild(t);
}
</script>

</body>
</html>
5
KasaiJo 7 Feb. 2020 im 18:06

4 Antworten

Beste Antwort

Sie möchten ein Element und keinen Text erstellen. Der textNode zeigt den von Ihnen angegebenen Text an, anstatt den HTML-Code zu erstellen, den Sie übergeben. Sie möchten die Elemente also einzeln in Variablen erstellen oder die innerHTML eines übergeordneten Elements mit dem Inhalt festlegen, den Sie für <span> haben.

Versuchen Sie, ein Element wie ein Absatz-Tag zu erstellen, und stellen Sie dann das innere HTML wie folgt ein:

 var t = document.createElement('p');
 t.innerHTML = "Hello World <span style=\"color:#BA0000\">error</span> ";

Dadurch erhalten Sie das Element mit dem HTML-Code wie gewünscht und nicht nur Text. Siehe das folgende Beispiel.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Node.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var t = document.createElement('p');
  t.innerHTML = "Hello World <span style=\"color:#BA0000\">error</span> ";
  document.body.appendChild(t);
}
</script>

</body>
</html>
4
CoderLee 7 Feb. 2020 im 15:17

Sie müssen ein Element erstellen. Mit createTextNode wird nur Text erstellt.

So können Sie dies mit createElement erreichen

function myFunction() {
  var span = document.createElement("span");
  span.style.color = "#BA0000";
  span.innerText = "error";
  document.body.appendChild(span);
}

Ihr vollständiger Code sieht also ungefähr so aus:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to make a BUTTON element.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var t = document.createTextNode("Hello World ");
  var span = document.createElement("span");
  span.style.color = "#BA0000";
  span.innerText = "error";
  document.body.appendChild(t);
  document.body.appendChild(span);
}
</script>

</body>
</html>
3
nopassport1 7 Feb. 2020 im 15:21

CreateTextNode () wird verwendet, um HTML zu entkommen. Versuchen Sie, die Farbe zu ändern, indem Sie das Element anhand einer ID anvisieren. Hier ist ein Beispiel

<p>Click the button to create a Text Node<span id='color_me'>color me</span></p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("color_me").style.color = "#ff0000";
}
</script>
-1
MattJamison 7 Feb. 2020 im 15:21

Sie sollten ein span-Element erstellen und an den Körper anhängen.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Node.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
const span = document.createElement('span');
span.textContent = 'error'
span.style.cssText = 'color: #BA0000';

  var t = document.createTextNode("Hello World ");
    document.body.appendChild(t);
  document.body.appendChild(span);
}
</script>

</body>
</html>
1
Ma'moun othman 7 Feb. 2020 im 15:15