Question

我有一个带文本的div和一个用作其中链接的图标。我希望在单击按钮时更改文本而不影响图标。

innerHTML和innerText都使图标消失。

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

文本正确更改，但图标消失。将图标移到div之外当然可以解决问题，但是我不想这样做。任何帮助都非常感谢。

Answer 1

使用element.innerText（），您实际上将覆盖div的全部内容-包括其他html元素，例如锚标记。

您的div上有一个孩子，它实际上保存着您的文本。您可以通过 document.getElementById（“ title”）。firstChild 以及它的 .data 属性来引用它。

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>

Answer 2

就像jean3xw所说的那样，您可以将文本放置在另一个元素内，并仅更改该元素的内容。但是，您可以采用其他方式来做到这一点，使html保持原样。

首先，只需将功能更改为此：

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

Answer 3

一如既往，可以应用许多求解方法，这取决于您惯用的编码方式所生成的HTML。我将向您展示解决方案，这对我来说似乎更容易：将要更改的文本包装为HTML元素，然后将其作为目标

//-- 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元素，则可以使用element.childNodes获得每个节点，并且文本将是第一个节点和一个文本节点，因此您必须选择textNode或firstNode子节点（使用最终直接将element.firstchild）。我不推荐以后的解决方案，因为： 1）脚本会更长且复杂 2）如果您想更改DOM中元素流的顺序，则很痛苦，您还必须修改代码

即使您还可以选择文本中的所有内容（使用container.innerHTML），也可以通过选中（作为字符串值的形式）选择HTML元素中不包含的内容（语义不完整，因为文本应由文本标签指定）父节点的所有内容）<element>的开始和结束，并通过将'a'链接和图像处理为新文本中添加的新内容（这意味着更多的JavaScript使用和更复杂的代码）来检索标签中没有的内容；所以最好避免它。

Answer 4

我个人建议将文本放在标签内。

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>

如果您无法创建其他标签，则可以选择Obscure.

提出的解决方案

Answer 5

如果您使用的是jQuery，最好的方法是使用.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>

如何在div中更改文本而不更改div中的任何其他元素

5 个答案: