Use javascript to change text only in an element

Is there a simple way to change the text of an element only using vanilla javascript? In the code below, I thought that 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'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>

I've also tried but had little to no 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

标签： javascript html text replace

3条回答

疯言疯语

2楼-- · 2019-06-18 15:48

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 counter-intuitive that an element like div that doesn't have any nested elements that can contain text inside it actually does implicitly have a child element within it that contains the raw text and that element is a text node.

In order to access that (which will be separate from other elements within the div, you can navigate to the div and look for (in this case, it's firstChild because the text comes first and the image is second.

Also, when it comes to replacing the original text with something else...You were trying to call the .replace() string function on the div and not the text within the div. You can isolate just the text of the div by navigating to the text node within it and working just on that.

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>

0人赞添加讨论(0) 举报

三岁会撩人

3楼-- · 2019-06-18 16:01

Or the pragmatic:

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>

0人赞添加讨论(0) 举报

该账号已被封号

4楼-- · 2019-06-18 16:08

Get the first textNode by firstChild property 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>

0人赞添加讨论(0) 举报

Use javascript to change text only in an element

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间