Question

我试图用＆＃34; Hello World＆＃34;替换我的页脚文本。我不想通过添加类或ID来编辑HTML

HTML：

<footer>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </footer>

JavaScript的：

document.getElementById(footer).innerHTML="Hello World";

问题在于，当我执行上面的代码时，没有任何改变

Answer 1

这是因为你选择了不存在的id，请尝试这样做：

document.querySelector('footer').innerHTML = "Hello world";

@edit

document.querySelector('footer').innerHTML = "Hello world";

<footer>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </footer>

Answer 2

footer不是您选择的元素的ID，而是tag名称。

您可以使用tag选择器来选择页脚。

要更改div内容（我假设您要更改文本，保持div不变），您可以使用标签选择器选择div

可以更改文字。

document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";

以上陈述细分：

document.getElementsByTagName("footer") //select footer

document.getElementsByTagName("footer")[0] //1st matched element

document.getElementsByTagName("footer")[0].getElementsByTagName("div") // select div

document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0] // first div

document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World"; //change content

＆＃13;

document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";

＆＃13;

<footer>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </footer>

＆＃13;

Answer 3

您可以通过多种方式实现目标：

1）如果您需要更改HTML，则应使用以下代码定位footer：

document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';

＆＃13;

document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';

＆＃13;

<footer>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</footer>

＆＃13;

2）如果您只想修改文本而不更改HTML，您还可以使用以下内容：

document.getElementsByTagName('footer')[0].innerText = 'Hello World';

＆＃13;

document.getElementsByTagName('footer')[0].innerText = 'Hello World';

＆＃13;

<footer>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</footer>

＆＃13;

两种方法之间的区别在于前者将文本保留在div内，而后者保留在footer标记本身内。

如果你仔细检查两者，它将有如下输出：

1）

<footer>
    <div>
        Hello World
    </div>
</footer>

2）

<footer>
    Hello World
</footer>

Answer 4

通过标记包含js脚本，但请确保先前已加载脚本。示例性标记（用您实际的js文件夹的名称替换短语）：

<footer>
 ...
   <script type="text/javascript" src="<YOUR-JS-FOLDER>/text.js"></script>
</footer>

用JavaScript替换HTML页脚内容

4 个答案: