如何使用内部html更改网页中的静态文本？

Question

我在网站上有一些文本想要通过JavaScript进行更改，因为我无法通过其他任何方式进行更改。

简而言之，该网站的布局如下：

...some other divs before here, body, head, etc...
<div id="header" class="container-fluid clearfix">
    <div class = "hero-unit">
        <h1 class="title">Support Center</h1>
...some other divs for other parts of the page...
    </div>
</div>
...more divs, footer, etc...

我不需要单击或其他类似内容来更改文本，我只希望将其设置为与Support Center不同的内容，但是我不确定是否将脚本放置在正确的位置或语法错误？

我尝试过将其放置在前后，但似乎不起作用。 这是代码：

<script type="text/javascript">
var targetDiv = document.getElementByID("header").getElementsByClassName("hero-unit")[0].getElementsByClassName("title")[0];
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
</script>

谢谢。

Answer 1

在jQuery（如果可以使用）中，您将使用类似

$("#title").text("Something else");

Answer 2

看起来您没有获得更改html的特定类

像我一样尝试使用querySelector

JS小提琴

var targetDiv = document.querySelector('#header > .hero-unit > h1.title')
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";

Answer 3

查看页面的实际来源，您的页面不包含带有title类的h1元素。

您的实际源代码

 <div id="header" class="container-fluid clearfix"> <div class="hero-unit"></div> <div class="container-fluid clearfix"> <div class="row-fluid"> <div class="leftcolumn"></div> <div class="rightcolumn"></div> </div> </div> </div> 

这意味着它要等到页面加载后才存在。 您需要将代码放在生成h1 title元素的代码之后