How to change text inside a div without changing any other element in the div

I have a div with text and an icon which works as a link in it. I want the text to change on button click without affecting the icon.

both innerHTML and innerText make the icon disappear.

<div class="title" id='title'>Text I want to change
 <a href="https://link.com" target=_blank>
  <img src="icon.svg"id='icon'>
 </a>
</div>

<button id='button'>click here to change text<button>
function changeText(text) {
  document.getElementById("title").innerText=text
}
const button = document.getElementById('button');
button.addEventListener('click', () => changeText('the new text I want'));

the text change properly but the icon disappears. Moving the icon outside of the div of course solve the problem but I don't want to do it. Any help really appreciated.

With element.innerText() you're essentially overwriting the whole content of your div - including other html elements such as the anchor tag.

There's a child attached to your div that actually holds your text. You can reference it via document.getElementById("title").firstChild along with it's .data property.

function changeText(text) {
  document.getElementById("title").firstChild.data = text;
}
const button = document.getElementById('button');
button.addEventListener('click', () => changeText('the new text I want '));
<div class="title" id='title'>Text I want to change
  <a href="https://link.com" target=_blank><img src="icon.svg" id='icon'></a>
</div>

<button id='button'>click here to change text<button>

.text(), Get the combined text contents of each element in the set of matched This method does not accept any arguments. (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.) The code $( "div.demo-container" ).text() would produce the following result:. Here #one, #two and #three is the id of each link. And content-right is the classname of the div that we want to change the inner html.When we click on any of the links, click function for the corresponding link will execute and it will change the innerHTML of the content-right div with correspoding contents(p1,p2,p3);

Like jean3xw said, you can place your text inside another element and change just this element content. But, you can do it in a different way, keeping your html the way it are.

First, just do change your function to this:

function changeText(text) {
   // get elements involved with the text change
   var div = document.getElementById("title");
   var anchor = div.children[0];

   // first, remove the anchor
   div.removeChild(anchor);
   // then, change the text
   div.innerText = text;
   // last, reappend the anchor
   div.appendChild(anchor);
}

.not(), Within the function, this refers to the current DOM element. Given a jQuery object that represents a set of DOM elements, the .not() set, assuming we have found those elements previously by some other means. This statement changes the color of items 1, 2, 4, and 5. Adds a border to divs that are not green or blue. It can be in a span, p, h3, pre, or any other container tag. A container is an HTML tag with both an opening and a corresponding closing tag, and can contain content between the two. Thus, h1, td, and div are container tags.

As always many solve can be applied, depending of built of your HTML as you usual way of coding. I'll show you solve that seems the easier for me: Wrap the text you want to change into an HTML element and aim this one

//-- so you can aim prcisely what you want:
document.getElementById('changetext').innerHTML='new text value';
<div class="title" id='title'><span id='changetext'>Text I want to change</span>
 <a href="https://link.com" target=_blank>
  <img src="icon.svg"id='icon'>
 </a>

HTML div tag, A <div> section in a document that is styled with CSS: <html> <p>This is some text in a div element.</p> Any sort of content can be put inside the <div> tag! In the above output, you can see the Div place up and down because CSS Div is a block element that forces a line break before and after the element. In some situation you have to place these Div side by side. CSS Div side by side. CSS float property enables you to take an element out of normal flow and put content side-by-side.

Personally I would recommend placing the text inside a tag.

function changeText(text) {
    const span = document.querySelector(".title #text");
    span.innerText = text;
}

const button = document.getElementById('button');
button.addEventListener('click', () => changeText('the new text I want'), false);
<div class="title">
    <span id="text">Text I want to chang</span>
    <a href="https://link.com" target=_blank>
      <img src="https://cdn.tekcrispy.com/wp-content/uploads/2017/12/bancos-imagenes-gratis-640x422.jpg" id='icon'>
    </a>
 </div>

<button id='button'>click here to change text</button>

HTML DOM querySelectorAll() Method, Set the background color of the first element with class="example" inside of a < div> Get the element with id="myDIV" (a div), then get all elements inside div with The NodeList is a static collection, meaning that changes in the DOM has NO effect If you want to report an error, or if you want to make a suggestion, do not� But the alternative way would be to clone the existing div and modify the text inside it (if needed). Sometimes when we have a big element, that may be faster and simpler. The call elem.cloneNode (true) creates a “deep” clone of the element – with all attributes and subelements.

If you are using jQuery, best way is to use .text()

function changeText(text) {
  $("#title").text(text);
}

$("#title").addEventListener('click', () => changeText('the new text I want'));
<div class="title" id='title'>Text I want to change
  <a href="https://link.com" target=_blank>
    <img src="icon.svg" id='icon'>
  </a>
</div>

<button id='button'>click here to change text<button>

Node.textContent, Setting textContent on a node removes all of the node's children and replaces Sometimes people use innerHTML to retrieve or write text inside an element, but textContent has better performance because its value is not parsed as HTML. The HTML for divA is now: // <div id="divA">This text is different! Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

How to replace innerHTML of a div using jQuery?, div class = "div_1" >. < h1 >Geeksforgeeks</ h1 >. < h1 style = "color: green" >. This is the content inside the div before changing. </ h1 >. I have a div that I want to specify a FIXED width and height for, and also a padding which can be changed without decreasing the original DIV width/height or increasing it, is there a CSS trick for

CSS- Div- Be Careful When You Size Your Divs, One contains the navigation menu and the other contains page content. Table cells stretch to fit the content placed inside them, but DIVs may not! So if you set the HEIGHT and WIDTH properties for a DIV and then insert images or but consider the result if you're using absolute positioning to place all page elements. CSS Tutorial » CSS background image opacity without affecting child elements. CSS property as background-opacity that you wish to use only for changing the opacity or transparency of an CSS element's background without affecting the child elements it isn't.

Div boxes (tags), HTML and CSS Tutorial with examples - div boxes or div tags. text above may change position on the page if a viewer changes the text size, so the it centers at different resolutions but the position: absolute divs inside will stay in their If you code several block elements like divs with position: relative or without stating a� To replace innerHTML of a div in jQuery, use the html () or text () method.

Comments
  • Your code is throwing an error, because document.getElementByID is not a function, change it to document.getElementbyId. Javascript is a case sensitive language.
  • Sorry, it was just a typo, I edited right