Работа с HTML объектами в Jquery

322
17 декабря 2017, 11:36

Я считываю все содержимое HTML страницы и отображаю его на ней же после этого. Единственная разница, я хочу изменять некоторые части страницы в скрипте. Так есть код следующий: 

function getHTML() {
    return "<!DOCTYPE html>\n" + $('html')[0].outerHTML;
}
var page = getHTML();
$(".body-block pre code").text(page);

Но я не могу понять как работать с элементами в page. То есть к примеру я хочу изменять содержимое "pre code" на любой другой текст и даже неодноразово. По нормальному я бы сделал это так: 

$("pre code").text("Новый текст");

Но

var page = getHTML();
console.log(page.find("pre code").text());

Выдаст ошибку:

jQuery.Deferred exception: page.find is not a function TypeError: page.find is not a function

HTML в проекте это совершенно любая страница кода, пока что у меня нет ничего кроме базового HTML, я просто тестировал новые идеи:

<!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>

В голову лезут только регулярные выражения, но я не хотел бы с ними возиться. Нету ли тут какого-либо лучшего решения этой проблемы? Весь этот код можно хоть полностью переписать если есть удобнее вариант, я пока ничего лучше не придумал...

Answer 1

В общем оказалось что можно клонировать обьекты, что оказалось довольно удобно и просто. Следующий код решил мою проблему: 

originalPage = $("html").clone();
$(originalPage).find("pre code").text("New Text!");
READ ALSO
Вывод текста после обработки
javascript

Вывод текста после обработки

Сделал форму обратной связи с ajax на сайтеВ самом скрипте вывод сообщения следующий:

 252
Поменять формат даты в momentjs
javascript

Поменять формат даты в momentjs

Задача: Поменять формат датыЧто имеем: Спарсили дату в момент js

 238
Как создать ссылку, при нажатии на которую открывается фото в большем размере
PHP

Как создать ссылку, при нажатии на которую открывается фото в большем размере

Здравствуйте не могу решить проблемкуесть кусочек кода который не работает

 220
PHP Обработка многомерного массива $POST
PHP

PHP Обработка многомерного массива $POST

Есть форма отправки с массивом:

 212