Question

我在标头中包含以下代码：

<h1 class="header-title">
  <span>Title</span>
</h1>

然后我在页面上看到的内容：

<div id="content">
  <h1 class="category-title">Nike</h1>
</div>

我无法在后端编辑标头，我只能在标记之前添加JS代码。所以我的问题是，可以使用JS从内容中获取标题并将其替换为标头中的h1标题吗？标头中的标题在所有页面上都是相同的，我想在其中有“ category-title”。

Answer 1

您需要向DOMContentLoaded事件添加事件侦听器（以确保Javascript可以访问页面上的元素）。在此侦听器中，从一个元素中读取文本，然后将另一个元素的文本设置为该文本：

document.addEventListener('DOMContentLoaded', function() {
  let headline = document.querySelector('#content h1.category-title').textContent;
  document.querySelector('h1.header-title span').textContent = headline;
})

<h1 class="header-title">
  <span>Title</span>
</h1>

<div id="content">
  <h1 class="category-title">Nike</h1>
</div>

Answer 2

document.getElementById("title").innerText = document.getElementById("content").innerText;

<h1 class="header-title">
  <span id="title">Title</span>
</h1>

<div id="content">
  <h1 id="content" class="category-title">Nike</h1>
</div>

Answer 3

但是有可能。

<h1 class="header-title">
    <span id="title">Title</span> <!-- add some title !--> 
 </h1>

<div id="content">
  <h1 id="category_title" class="category-title">Nike</h1> <!-- add some title !-->

在您的js中

<script>
   var title = document.getElementById('title'); //get the element of the header
   var category_title = document.getElementById('category_title'); //get the element of the category
   title.innerHTML = category_title.innerHTML;  //the content of category will now be the content of you title
</script>

希望对您有帮助！

是否可以使用JS替换文本？

3 个答案: