html - Replace only text content inside DIV using JavaScript - Stack Overflow

admin管理员组

文章数量:1403461

I want to change only text content inside an h1 tag. Here's my code:

<h1 id="pageTitle" class="ms-core-pageTitle">
  <span id="DeltaPlaceHolderPageTitleInTitleArea">
    
      <span>
<span>
<a title="some title" href="/link/page.aspx">Change only this text and keep the rest</a>
</span>
</span>
    
  </span>

</h1>

I want to change only text content inside an h1 tag. Here's my code:

<h1 id="pageTitle" class="ms-core-pageTitle">
  <span id="DeltaPlaceHolderPageTitleInTitleArea">
    
      <span>
<span>
<a title="some title" href="/link/page.aspx">Change only this text and keep the rest</a>
</span>
</span>
    
  </span>

</h1>

I've tried this code :

document.getElementById("DeltaPlaceHolderPageTitleInTitleArea").innerHTML = "text changed";

But it doesn't work, here's the result:

<h1 id="pageTitle" class="ms-core-pageTitle">
  <span id="DeltaPlaceHolderPageTitleInTitleArea">text changed</span>

</h1>

Any help would be appreciated

• javascript
• html
• jquery
• dom

Share Improve this question Follow edited Jun 9, 2021 at 10:07 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 30, 2017 at 13:15 ysfibmysfibm 43622 gold badges1616 silver badges3232 bronze badges 1

• You can achieve it by jquery $("#pageTitle a").html("Text Changed"); – Rahul Patel Commented Mar 30, 2017 at 13:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You have to use querySelector() method, in order to change text content of hyperlink.

document.querySelector("#pageTitle a").innerHTML = "text changed";

<h1 id="pageTitle" class="ms-core-pageTitle">
  <span id="DeltaPlaceHolderPageTitleInTitleArea">
	
  <span>
<span>
<a title="some title" href="/link/page.aspx">Change only this text and keep the rest</a>
</span>
</span>
  </span>
</h1>

What you are doing is changing "DeltaPlaceHolderPageTitleInTitleArea" 's innerHTML therefore you replace :

<span>
<span>
<a title="some title" href="/link/page.aspx">Change only this text and keep the rest</a>
</span>
</span>

with:

text changed

What you wanted to change is the title's text am I right ? To do so :

really basic JS:

document.getElementById("DeltaPlaceHolderPageTitleInTitleArea").children[0].children[0].children[0].innerHTML = "text changed";

a bit more advanced :

document.querySelector("DeltaPlaceHolderPageTitleInTitleArea > span > span > a").innerHTML = "text changed";

Or using jQuery :

$("DeltaPlaceHolderPageTitleInTitleArea > span > span > a").text("text changed");

You can try out this.

function changeContent(){

var element = document.getElementById('DeltaPlaceHolderPageTitleInTitleArea');
element.children[0].innerHTML = "whatever";
}

<h1 id="pageTitle" class="ms-core-pageTitle">
  <span id="DeltaPlaceHolderPageTitleInTitleArea">

    <a title="some title" href="/link/page.aspx">Change only this text and keep the rest</a>

	</span>
  
  <button name="change content" onClick="changeContent()">change content</button>

</h1>

You are pointing to the id of the h1 tag and not the anchor ()tag containing the text to be changed. this im not not sure will allow you to insert the text exactly where you want it to be. using the query selector or any other means of selecting the tag wrapping the text you what to change will surely do. if you dont mind, jquery selector will do the job much easier

you can try something like $("#DeltaPlaceHolderPageTitleInTitleArea a").text("")

本文标签： htmlReplace only text content inside DIV using JavaScriptStack Overflow