Как копировать теги в 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],