CODEWITHSUNDEEP
javascripthtml
JLeno46
JLeno46

Reputation: 1269

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.

Upvotes: 2

Views: 12314

Answers (5)

Arosha
Arosha

Reputation: 1401

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>

Upvotes: 1

unferna
unferna

Reputation: 125

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>

If you can not create another tag, you can opt for the solution proposed by Obscure.

Upvotes: 1

obscure
obscure

Reputation: 12891

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>

Upvotes: 8

jean3xw
jean3xw

Reputation: 121

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>

Obviously if you don't want to add a wrapping HTML element you can get each node using element.childNodes and the text will be 1st node and a text node so you've to select the textNode or the firstNode child (using diretly element.firstchild eventually). I don't reccomand later solution because : 1) script will be more long and complicated 2) a pain if you want to change order of element flow in the DOM you'll have to modify code as well

Even if you can also select all content in text (using container.innerHTML)and select what not in a HTML element(semanticaly not complete because a text should be designated by a text tag) by checking (as a string value of all content of parent node)where <element> start and end and retrive what is not in a tag by coping the 'a' link and the image to new content added at new text that mean more JavaScript use and more complicated code; so better avoid it.

Upvotes: 1

dfeprado
dfeprado

Reputation: 43

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);
}

Upvotes: 1

Related Questions