Użyj javascript do zmiany tekstu tylko w elemencie

Czy istnieje prosty sposób na zmianę tekstu elementu tylko za pomocą javascript wanilii? W poniższym kodzie pomyślałem, że użycie .textContent, zamiast .innerHTML spowoduje zmianę tekstu i pozostawienie obrazu.Użyj javascript do zmiany tekstu tylko w elemencie

<head> 
    <script> 
     function change_stuff() { 
      var div = document.getElementById('to_change'); 
      div.textContent = "OMG...it's an image!"; 
     } 
    </script> 
</head> 
<body> 
    <div id="to_change"> 
     This is a huge block of text that I want to replace while leaving the image in place 
     <img src="./the_image.jpg"> 
    </div> 
    <button onclick="change_stuff();"> 
     ThE dOER!! 
    </button> 
</body>

Mam też próbował, ale miał niewiele do sukcesu z wielu odmian to:

function change_stuff() { 
    var div = document.getElementById('to_change'); 
    var text = div.textContent; 

    div.textContent = text.replace(text, ""); 
}

Każda pomoc będzie mile widziane

Źródło

2016-12-29 Anonymous Armadillo

Nie. To jest myślenie życzeniowe. Umieść tekst w zakresie, jeśli chcesz zmienić tylko ten tekst, lub usuń tekstNode z elementu div – mplungjan

Get pierwszy textNode przez firstChild własności i aktualizację treści.

function change_stuff() { 
 
    // get the first child node, in your code which is the text node 
 
    var t = document.getElementById('to_change').firstChild; 
 

 
    // update the text contents in the node 
 
    t.nodeValue = ""; 
 

 
    // or t.textContent = ""; 
 

 
    // or remove the node itself 
 
    // t.parentNode.removeChild(t) 
 
}

<div id="to_change"> 
 
    This is a huge block of text that I want to replace while leaving the image in place 
 
    <img src="./the_image.jpg"> 
 
</div> 
 
<button onclick="change_stuff();"> 
 
    ThE dOER!! 
 
</button>

Źródło

2016-12-29 17:27:50

W W3C DOM (Document Object Model), wszystko jest "węzłem". Węzły przychodzą w different types (węzły komentarzy, węzły elementów, węzły atrybutów, a nawet węzły tekstowe). Może wydawać się sprzeczne z intuicją, że element taki jak div, który nie ma żadnych zagnieżdżonych elementów, które mogą zawierać tekst wewnątrz, faktycznie zawiera element potomny, który zawiera nieprzetworzony tekst, a ten element jest węzłem tekstowym.

W celu uzyskania dostępu, który (która będzie oddzielona od innych elementów w div, można przejść do div i poszukać (w tym przypadku, to firstChild ponieważ tekst jest na pierwszym miejscu, a obraz jest drugi.

Ponadto, jeśli chodzi o zastąpienie oryginalnego tekstu z czymś innym ... Próbowałeś wywołać funkcję .replace() ciąg na div a nie tekst w div. można wyizolować tylko tekst div przez przechodząc do węzła tekstowego w nim i pracując właśnie nad tym

function change_stuff() { 
 
    // Get a reference to the div element's text node which is a child node 
 
    // of the div. 
 
    var divText = document.getElementById('to_change').firstChild; 
 
    
 
    // Get the current text within the element: 
 
    var text = divText.textContent; 
 

 
    // You can do whatever you want with the text (in this case replace) 
 
    // but you must assign the result back to the element 
 
    divText.textContent = text.replace(text, ""); 
 
}

<div id="to_change"> 
 
     This is a huge block of text that I want to replace while leaving the image in place 
 
     <img src="./the_image.jpg"> 
 
    </div> 
 
    <button onclick="change_stuff();"> 
 
     ThE dOER!! 
 
    </button>

Źródło

2016-12-29 17:24:12

Albo pragmatyczne:

function change_stuff() { 
 
    var div = document.getElementById('to_change'), 
 
    img = div.getElementsByTagName('img')[0]; 
 
    div.innerHTML = "OMG...it's an image!"; 
 
    div.appendChild(img); 
 
}

<div id="to_change"> 
 
    This is a huge block of text that I want to replace while leaving the image in place 
 
    <img src="./the_image.jpg"> 
 
</div> 
 
<button type="button" onclick="change_stuff();"> 
 
    ThE dOER!! 
 
</button>

Źródło

2016-12-29 17:42:17 mplungjan

Użyj javascript do zmiany tekstu tylko w elemencie

Odpowiedz

Powiązane problemy