Question

我对我的项目有一个奇怪的想法。我只想获取所有文档HTML，将其放在Jquery对象中，并将结果呈现给此页面上的<pre>。由于缺乏我发现的信息，我不确定这是否可能，所以我希望至少看到一些关于如何做到这一点的提示。

这里的事情是我知道基础知识，我完全需要在Jquery对象中更改代码/文本/数据的方式。也许它可以用正则表达式，但我宁愿不使用它们。我不知道是否可以使用字符串替换功能。但那可能不是那么难！应该有一种方法可以使用一些现有的Jquery函数。所以这就是我到目前为止所做的：

function getHTML() {
    return "<!DOCTYPE html>\n" + $('html')[0].outerHTML;
}

var originalPage = getHTML();
$(".body-block pre code").text(originalPage);

我现在可以使用originalPage在其中找到一些信息：

$(originalPage).find("pre code").text();

但我无法更改任何信息：

$(originalPage).find("pre code").text("New Text!");
$(".body-block pre code").text(originalPage);

上面的代码由于某种原因没有做任何事情。知道为什么以及如何在originalPage内对HTML进行更改？

这里只是为了完成这个问题，我使用的是一个HTML示例：

＆＃13;

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Tests</title>
  <meta name="description" content="Tests">
  <meta name="author" content="Telion">

  <link rel="stylesheet" href="assets/css/reset.css?v=1.0">
  <link rel="stylesheet" href="assets/css/main.css?v=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
    <div class="body-block">
        <pre><code>Hello World!</code></pre>
    </div>

    <script src="assets/js/main.js"></script>
</body>
</html>

＆＃13;

Answer 1

好的，事实证明我们可以clone个对象，然后随便做任何我们想要的事情。正如@Rene所提到的，我更多地搜索了这个并为自己做了一个工作的例子：

originalPage = $("html").clone();
$(originalPage).find("pre code").text("New Text!");

这个问题已经结束，两天后我会接受这个问题作为答案。

Answer 2

假设你有一个id为test的div。您可以使用以下Jquery代码将此div的内容设置为带有单词hey的h4标记：

$("#test").html(<h4>Hey</h4>)

如果您想将一些html附加到现有的html，您可以使用以下

$("#test").append(<h4>Hey</h4>)

删除标记中所有HTML并添加新内容的文档：http://api.jquery.com/html/

将HTML内容添加到代码的文档： http://api.jquery.com/append/

编辑Jquery对象

2 个答案: