使用javascript仅更改元素中的文本[重复]答案

【问题标题】：Use javascript to change text only in an element [duplicate]使用javascript仅更改元素中的文本[重复]
【发布时间】：2017-05-14 01:19:01
【问题描述】：

有没有一种简单的方法可以仅使用原生 javascript 来更改元素的文本？在下面的代码中，我认为使用.textContent 而不是.innerHTML 会更改文本并留下图像。

<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>

我也尝试过，但几乎没有成功：

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

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

任何帮助将不胜感激

【问题讨论】：

标签： javascript html text replace

【解决方案1】：

通过firstChild属性获取第一个textNode并更新内容。

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>

【讨论】：

【解决方案2】：

在W3C DOM (Document Object Model)中，一切都是一个“节点”。节点进来different types（评论节点、元素节点、属性节点甚至文本节点）。像div 这样没有任何可以在其中包含文本的嵌套元素的元素实际上确实隐含了一个包含原始文本的子元素并且该元素是文本节点，这似乎违反直觉。

为了访问它（它将与div 中的其他元素分开，您可以导航到div 并查找（在这种情况下，它是firstChild，因为文字在前，图片在后。

另外，在用其他内容替换原始文本时...您试图在div 上调用.replace() 字符串函数，而不是div 中的文本。您可以通过导航到其中的文本节点并对其进行处理，从而仅隔离 div 的文本。

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>

【讨论】：

【解决方案3】：

您需要使用 innerText 来设置 div 内的文本（即：div.innerText = replacement）。

见Node.textContent - Differences from innerText。

【讨论】：

【解决方案4】：

还是务实的：

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>

【讨论】：