如何使用Javascript在同一HTML文件中重复早期文本

Question

我正在为网站上的文章创建一个新页面，该页面将在页面稍后部分复制<h1>标记的内容。

我想包含一小段代码（我想像过Javascript，但还有其他方法可以做到）-在底部添加我的文章的Title <h1>的标题，使其看起来像这样：

<h1> This is the title of the article </h1>

 and then at the end of the page:

  Related Articles:

   <p> If you enjoyed reading 
         <script>... populatate "This is the title of the article"</script> 
  then why not explore the following similar articles? </p>

我已经研究了它，似乎除了复制<title>标记外，看不出该如何做。 这可能真的很简单，但是有人知道如何做到这一点吗？

Answer 1

HTML

<h1 id="something"> title </h1>
<h1 id="repeated_title"></h1>

JQUERY

$("#repeated_title").text($("#something").text());

Answer 2

如果您有这样的代码：

If you enjoyed reading <span id="populate"></span>

您可以编写如下的jQuery代码段：

$(function(){
    $('#populate').text($('h1').text());
});

Answer 3

在生成/编写HTML时（而不是在运行时）复制数据可能是一个更好的主意，但是在这种情况下，请将您要复制文本的位置包装到可以引用的元素中，例如，按ID：

<span id="title_copy"></span>

然后，找出一种方法来引用您要从中复制文本的标题，例如再次通过ID：

<h1 id="main_title">This is the title of the article</h1>

然后，您可以使用JS将“ main_title”的内容复制到“ title_copy”：

document.getElementById('title_copy').innerHTML = document.getElementById('main_title').innerHTML;

Answer 4

在纯Javascript中，这就是您的操作方式（看起来不错，没有jQuery）

<h1 id="something"> title </h1>
If you enjoyed reading <span id="populate"></span>

使用Javascript

<script>
    document.getElementById("populate").innerHTML = document.getElementById("something").innerHTML;
</script>

不过，最好在服务器端执行此操作。

PS您不必在其中放置<script>标记。 文档中的任何地方都可以使用，并且大部分都在<head>

Answer 5

有很多方法可以做到这一点，而javascript并不是最好的方法，因为您应该在服务器端这样做。

<h1 id='title'> This is the title of the article </h1>

and then at the end of the page:

Related Articles:

<p> If you enjoyed reading <span id="title2"></span> then why not explore the following similar articles? [/p]
<script>$("#title2").text(#("#title").text);</script>

如何使用Javascript在同一HTML文件中重复早期文本

问题描述

5 个解决方案

解决方案1
1 2013-07-23 11:58:37

解决方案2
1 2013-07-23 11:59:29

解决方案3
1 已采纳 2013-07-23 12:04:01

解决方案4
1 2013-07-23 12:04:11

解决方案5
0 2013-07-23 12:01:16

如何使用Javascript在同一HTML文件中重复早期文本

问题描述

5 个解决方案

解决方案1 1 2013-07-23 11:58:37

解决方案2 1 2013-07-23 11:59:29

解决方案3 1 已采纳 2013-07-23 12:04:01

解决方案4 1 2013-07-23 12:04:11

解决方案5 0 2013-07-23 12:01:16

解决方案1
1 2013-07-23 11:58:37

解决方案2
1 2013-07-23 11:59:29

解决方案3
1 已采纳 2013-07-23 12:04:01

解决方案4
1 2013-07-23 12:04:11

解决方案5
0 2013-07-23 12:01:16