使用 JavaScript 仅替换 DIV 中的文本内容答案

【问题标题】：Replace only text content inside DIV using JavaScript使用 JavaScript 仅替换 DIV 中的文本内容
【发布时间】：2017-03-30 13:15:30
【问题描述】：

我只想更改 h1 标记内的文本内容。这是我的代码：

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

我试过这段代码：

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

但它不起作用，结果如下：

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

</h1>

任何帮助将不胜感激

【问题讨论】：

可以通过jquery实现 $("#pageTitle a").html("Text Changed");

标签： javascript html jquery dom

【解决方案1】：

您必须使用querySelector() 方法来更改超链接的文本内容。

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>

【讨论】：

【解决方案2】：

你正在做的是改变 "DeltaPlaceHolderPageTitleInTitleArea" 的 innerHTML 因此你替换：

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

与：

text changed

你想改变的是标题的文字我是对的吗？这样做：

非常基础的 JS：

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

更高级一点：

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

或者使用 jQuery ：

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

【讨论】：

【解决方案3】：

你可以试试这个。

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>

【讨论】：

【解决方案4】：

您指向的是 h1 标记的 id，而不是包含要更改的文本的锚 () 标记。我不确定这是否允许您将文本准确地插入到您想要的位置。使用查询选择器或任何其他选择包装文本的标签的方法，您肯定会做的更改。如果您不介意，jquery 选择器会更轻松地完成这项工作

你可以试试$("#DeltaPlaceHolderPageTitleInTitleArea a").text("")

【讨论】：