38

I'm currently developing a website in HTML and I want to copy some of the code from other websites. However when I go into the inspect element feature and try to copy just part of the code it ends up copying the whole script. Is there any way I can get just part of the code from inspect element without having to copy the whole thing and cut out the bits that I don't want in dreamweaver?

mars
  • 392
  • 1
  • 4
  • 8

8 Answers8

49

Right click on the particular element (e.g. div, table, td) and select the copy as html.

Ben Everard
  • 13,652
  • 14
  • 67
  • 96
User
  • 1,644
  • 10
  • 40
  • 64
  • 3
    I don't have a `Copy as HTML` option, but I did find an `Edit as HTML` option which I could then Ctrl+A to select all and then copy and paste. Great tip! – user3738893 Feb 12 '15 at 16:22
  • 1
    Note that this will not save the content of iframes! To copy the content of iframes you'll have to do the above for each element separately. – oriadam Jun 16 '15 at 07:53
  • 1
    You can also just highlight the element and hit `ctrl+c` on your keyboard. – oriadam Jun 16 '15 at 07:55
  • 1
    I only have "Copy" -> "Copy outerHtml". It works as well, thank you. – franz1 Jul 30 '19 at 10:52
  • The `Copy element` didn't work for me. Choosing `Edit as HTML` then copying the text box works for me! – Sophia Feng Mar 05 '20 at 04:03
4

In earlier versions of Chrome we could simply select and copy an element (with Ctrl+C or Cmd+C) and then paste it inside an element by selecting it and then paste (with Ctrl+V or Cmd+V). It's not possible in the latest versions though (I'm running Chrome 58.0.3029.110) and it has set me up many times since then.

Instead of using the commands for copy and paste, we now have to right click the element -> Copy -> Copy Element and then right click the element that we want to append the copied element to -> Copy -> Paste Element.

I don't understand why the short commands are deactivated but at least it's still possible to do it in a more inconvenient way.

Calsal
  • 1,375
  • 14
  • 25
3

Click on the line or element you want to copy. Copy to clipboard. Paste.

The only tricky thing is if you click on a line, you get everything that line includes if it was folded. For example if you click on a div, and copy, you get everything that the div includes.

You can also get only what you want by Right Clicking, and select 'Edit as HTML'. This will make that section essentially text, with none of the folding activated. You can then select, copy and paste the relevant bits.

Joshua Dance
  • 8,847
  • 4
  • 67
  • 72
1

If you need to copy whole page,

  1. got to html tag of the page.
  2. right click on it.
  3. select "copy->copy element" option
user14659427
  • 111
  • 2
  • 10
0

You can copy by inspect element and target the div you want to copy. Just press ctrl+c and then your div will be copy and paste in your code it will run easily.

Abdullah Khan
  • 27
  • 1
  • 6
  • 1
    not true atm, an update must have disabled ctrl+c, giving me a headache right now as transposing one of my old websites. – Daniel Brose May 09 '17 at 23:15
  • @DanielBrose not sure if it was true in 2017, but today you can ctrl + c/ctrl + v to copy and paste elements from dev tools. – Art3mix Mar 11 '21 at 10:05
0

The best solution is instead of opening the inspect element -> right click -> View Page Source -> then copy the entire code.

This solution works for Chrome.

Fadi
  • 585
  • 4
  • 22
-1

(eg: div,footer,table) Right click -> Edit as HTML

Then you can copy and paster wherever you need...

that's all enjoy your coding.....

Mahendren Mahisha
  • 1,072
  • 11
  • 9
-2

you dont have to do that in the Google chrome. Use the Internet explorer it offers the option to copy the css associated and after you copy and paste select the style and put that into another file .css to call into that html which you have created. Hope this will solve you problem than anything else:)

Sheson Jose C
  • 1