All geek questions in one place

Use javascript to change text in element only

Is there an easy way to change element text using vanilla javascript only? In the code below, I thought using .textContent rather than .innerHTML would change the text and leave the image behind.

 <head> <script> function change_stuff() { var div = document.getElementById('to_change'); div.textContent = "OMG...it 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>

I tried too, but didn't have much success with many variations of this:

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

Any help would be appreciated

+5
source share
3 answers

Get the first textNode firstChild and update the content.

 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>
+8
source

In the W3C DOM (Document Object Model) , everything is a “node”. Nodes come in different types (comment nodes, element nodes, attribute nodes, and even text nodes). It may seem inconsistent that an element such as a div , which does not have nested elements that can contain text inside it, actually implicitly has a child element inside it that contains raw text, and this element is text node.

To access this (which will be separated from other elements in the div , you can go to the div and search (in this case, it is firstChild , because the text comes first and the image is second.

Also, when it comes to replacing the source text with something else ... You tried to call the .replace() string in a div , not text in a div . You can select only the div text by going to the node text inside it and working on this very issue.

 function change_stuff() { // Get a reference to the div element 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>
+3
source

Or pragmatic:

 function change_stuff() { var div = document.getElementById('to_change'), img = div.getElementsByTagName('img')[0]; div.innerHTML = "OMG...it 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>
+1
source

Source: https://habr.com/ru/post/1262043/

More articles:


All Articles