Как копировать теги в html

Как скопировать всё содержимое тега (включая другие теги и их содержимое) и вставить внутрь другого тега

Но эта зараза всё обрабатывает в реальном времени + копирует ни только теги и их содержимое, но ещё и их свойства. И когда у меня на брекпойнте происходит вот такой фокус:

Как узнать содержимое указанного тега?
Как сделать подобное в коде ниже, только работающий вариант? var p =.

Смогу ли я получить доступ к переменной данного тега из другого тега script?
если я в одном теге script объявлю переменную с именем mymap,то смогу ли я получить доступ к этой.

Определить содержимое XML тега
сервер присылает ответ в виде XML. Нужно определить текст в XML теге, например из.

Решение

Если почитать оф. документацию, то можно понять, что метод clone копирует не содержимое тега, а сам тег вместе с его внутренностями, поэтому в итоге после клонирования у вас получается:

В вашем случае можно клонировать объект, менять ему класс на нужный и вставлять в контейнер, где уже находился .la_desktop

Замечу, что это очень долгая и дорогая операция ( особенно, если у вас в la_desktop лежит целый сайт ). Зачем вам такие ухищрения, возможно вашу задачу можно решить более оптимизированным путем

la_desktop это часть боковой панели статей, контент которой у «Васи дизайнера» в мобильной версии перемещается из левого блока в конец основного контента, т.е. по коду перепрыгивая весь контентный блок и вообще перепрыгивая в другой контейнер. На css кроме как позиционированием + нижним падингом статьи туда не зафигачишь, а фигачить позиционированием нельзя т.к. высота статей динамическая (могут новые статьи добавляться). Сделал короче по тупому через «.appendTo», вроде работает, уж насколько сейчас это напряжная операция сказать сложно.

Источник

Как писать HTML и CSS быстро: emmet

Эммет — инструмент, который поможет писать HTML и CSS быстро.

Слева пишем обычным способом, справа с помощью эммета — сравните:

Как это работает: пишем комбинацию, жмем Tab и код раскрывается в HTML.

Расскажу про самые частые комбинации, которые вам пригодятся. Откройте кодпен в новой вкладке и повторяйте, чтобы запомнить. Эммет в кодпене уже установлен, поэтому все будет работать.

Повторим алгоритм: пишем комбинацию, жмем Tab и код раскрывается в HTML.

Див или любой другой тег

Пишем тег и раскрываем:

Тег с классом

Вложить тег в тег

Чтобы записать код внутри тега, поставьте знак >

Теги друг за другом

Чтобы расположить теги друг за другом, поставьте знак +

Несколько одинаковых тегов

Текст в теге

Оберните текст в фигурные скобки, чтобы он раскрылся внутри тега:

Рыбный текст

Этого хватит для большинства случаев, остальное в документации.

Алгоритм такой же: пишем комбинацию, жмем Tab и получаем CSS.

Свойства

Просто вводите первые буквы свойств:

Свойства и значения

Можно вводить свойства сразу со значениями:

Если не хотите пиксели, дописывайте единицу измерения — fz2em → font-size: 2em.

Множественные значения

Чтобы проставить значения подряд, пишите через дефис: p10-12-15.

Как установить эммет в редактор кода

Эммет помогает писать быстро, но все комбинации сразу не запомнить. Поначалу пользуйтесь шпаргалкой, постепенно запомните.

Источник

Как можно скопировать кусок кода html вместе с его стилями?

Допустим, я нашел интересно оформленный блок (форма обратной связи).
Как можно скопировать html со всеми стилями?

1 ответ 1

Есть прекрасное расширение для Chrome SnappySnippet (исходники).

Выбираем элемент для копирования

Выделяем элемент в инструментах разработчика

Переходим на вкладку SnappySnippet в инструментах разработчика
и жмем на кнопку Create a snippet from inspected element

Копируем получившуюся разметку и стили, после чего наслаждаемся результатом:

Слева исходник, справа скопированный элемент

Получившийся код можно сразу отправить на jsFiddle, CodePen или JS Bin.
Точность не 100%-я, но результат все равно хорош.

Update:

Удивительно, но IE обошел другие браузеры в этом плане.
Скопированные стили не содержат ничего лишнего.
Вот, как это делается в IE11+:

Чтобы увидеть результат в сниппете его необходимо прокрутить вправо до упора.
Единственная проблема: путь к картинке. Если его исправить, то получается следующее:

Слева исходник, справа скопированный элемент

Источник

Как вставить тег одним кликом. Плагин WebEdit

Здравствуйте уважаемые веб-мастера.

Продолжим облегчать себе жизнь с помощью замечательного редактора Notepad++.

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

Да и не только теги, но и отдельные атрибуты, и т.п.

Скорее всего вы знакомы с этой опцией, так как наверняка вам приходилось выделить мышью часть текста, а затем кликнув по значку тега, заключить в него выделенный отрезок.

Часто применяется на форумах и в редакторах CMS, только в Notepad++ возможности её гораздо внушительней.

Вот такой прибамбас мы сейчас и сделаем.

Реализует её плагин WebEdit. Значит идём в Плагины — Plugin Manager — Show Plugin Manager и находим там данный модуль.

Далее стандартная установка, т.е. кнопка Install — «Да» в Контроле учётных записей — «Да» в запросе на перезагрузку, после чего на панели инструментов появится шкала доступных тегов.

Теперь, если выделить мышью кусок кода и щёлкнуть по нужному тегу, выделенный отрезок будеn заключён в этот тег.

Можно ничего не выделять, а просто установить метку курсора на нужное место, и выбранный тег, после клика по нему, появится на этом месте.

Хорошо, правда? А вообще-то не совсем.

По умолчанию плагин выводит на панель инструментов несколько, на мой взгляд, очень редко применяемых тегов.

Например h4, h5 и h6.

Теперь будем добавлять то что нам нужно.

Во первых нам потребуется картинка для панели инструментов.

Готовые наборы картинок можно найти в интернете, но в них может не оказаться того что вам нужно.

Я, например, скачал три набора, но ни в одном не нашёл скриптовых картинок, поэтому, чем тратить время на поиски, проще наделать нужных изображений в этом же Notepad++.

Для тех, кто ещё не силён в CSS покажу как это делается.

Открываем новый документ и пишем следующий код.

Дивов, как вы уже догадались, можно наделать столько сколько нужно картинок, и сколько уместится на панели инструментов редактора.

Далее делаем скриншёт экрана, в Paint вырезаем наши кнопочки по отдельности и складываем в отдельную папку на компе.

С этим всё. Набор нужных картинок готов. Теперь нужно их загрузить в плагин.

Изображения грузятся в ту же директорию в которой находится файл WebEdit.ini, который мы уже успешно редактировали.

Значит нам нужно попасть в Edit Config. именно там лежат картинки.

Снова в редакторе проходим Плагины — WebEdit — Edit Config и в адресной строке редактора находим полный путь к файлу.

Теперь можно открыть поисковик Windows и далее Компьютер — Пользователи — 1, и тут Упс! Не знаю как на других, но на 7-ой винде папки AppData, в директории 1 нет.

Не пугайтесь, она конечно же есть, но скрытая, и чтобы в неё попасть необходимо щёлкнуть по адресной строке поисковика, удалить всё из неё и вставит следующую конструкцию

Поисковик услужливо предложит отправиться в поиск, не поддавайтесь, переходите по синей стрелочке в адресной строке.

И вот она нужная директория.

Дальше идём по пути без проблем до нужной папки.

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

Копируем в нашей папке и вставляем в папку Config. Вот они:

Теперь снова в редактор, в файл WebEdit.ini.

В [Toolbar] вставляем наши картинки, при этом переделываем нумерацию.

В в [Commands] в соответствующем порядке прописываем те конструкции, которые будут вставляться в код.

Обратите внимание, что в конце конструкций без закрывающего тега, обязательно должен быть знак | без которого ничего не сработает, а слово написанное в первой части строки будет выводится во всплывающей подсказке.

Теперь сохраняем файл, перезагружаем редактор и вот они наши нововведения

Проверяем как работает и испытываем чувство глубокого удовлетворения от проделанной работы и полученного результата.

Можно ещё повозиться с распределением картинок на панели инструментов — какие-то в начало, какие-то в конец, но это уже на ваш вкус.

Источник

Как скопировать из страницы текст вместе с оформлением?

Не я один, наверное, сталкивался с вопросом, как скопировать из страницы не просто «plain text», а сохранить при этом форматирование — выделение цветом, италиком и т. д.?
Проблема осложняется тем, что исходный код страницы может быть разным. Это может быть html, а может — bb-code. Плюс, на выходе тоже может понадобиться или то, или другое.

То есть, проблема сводится к следующему:
1. Извлечение исходного, «сырого» текста.
2. Определение правил форматирования, использованных в данном конкретном случае.
3. Уточнение, на какие именно правила форматирования следует заменить те, которые используются в исходнике.
4. Создание текста с нужными нам правилами форматирования.

Объясню на примере.
Допустим, надо скопировать кусок текста новости с lenta.ru для рутрекера и наоборот.
На lenta.ru текст отформатирован с помощью html-тегов:
. Об этом сообщает Agence France-Presse со ссылкой на газету The Beijing Times. Наводнение в Пекине было вызвано ливневыми дождями, признанными самыми сильными в регионе за последние 60 лет.

Соответственно, если копировать с lenta.ru на рутрекер, надо просто преобразовать html в bb-code:
Agence France-Presse станет [url=http://www.afp.com/]Agence France-Presse[/url]

В общем, идея понятна, надеюсь.
Я поискал в инете способы осуществления этого механизма и нашёл только 2 плагина для Firefox, которые реализуют нечто похожее. Первый позволяет копировать исходный код «под выделенным текстом» (Copy HTML). Второй — позволяет копировать выделенный текст с заменой html-разметки на BBCode-разметку (и то как-то неуверенно, по-моему).

Народ, признавайтесь, как решаете подобные задачи? Может есть скрипты Greasemonkey или плагины под лиса? Я готов даже софт юзать. Лишь бы была возможность как-то настраивать механизм подобного копирования «с заменой».
Может можно выстроить цепочку из онлайн-сервисов наподобие Cool HTML to BBCode Converter?

Пы Сы
А ведь иногда приходится копировать текст с форума на форум, и движки разные. Например, на одном форуме смещение влево указывается с помошью bbcod’а
[left]. [/left],

Источник