How can I get my large HTML code into a string for use in .innerHTML

Question

I was trying to quickly mod a website. I copied the code and did a quick inspect element, and edited the HTML to have what I wanted. I was wondering how I would be able to stick this code into a string... it has all the symbols that I would use to distinguish a string inside of it... Do I have to do this the long way by recreating each of the elements with createElement? Thank you.

I have tried to paste it into .innerHTML, but javascript doesn't it like it because the code has string identifiers in it.

document.getElementById("navigation").innerHTML = "" <div class="" id="navigation"><div class="inner logged-in"><ul><li class="logo"><a aria-label="Scratch" href="/"></a></li><li class="link create"><a href="/projects/editor/"><span>Create</span></a></li><li class="link explore"><a href="/explore/projects/all"><span>Explore</span></a></li><li class="link discuss"><a href="/discuss"><span>Discuss</span></a></li><li class="link ideas"><a href="/ideas"><span>Ideas</span></a></li><li class="link about"><a href="/about"><span>About</span></a></li><li class="search"><form class="form" novalidate=""><button class="button btn-search" type="submit"></button><div class="form-group row no-label"><label class="control-label col-sm-3" data-required="false" for="frc-q-1088"></label><div class="col-sm-9"><input type="text" class="input" aria-label="Search" name="q" placeholder="Search" id="frc-q-1088" value=""><span class="help-block">Not Required</span></div></div></form></li><li class="link right messages"><a href="/messages/" title="Messages"><span class="message-count">0 </span><span>Messages</span></a></li><li class="link right mystuff"><a href="/mystuff/" title="My Stuff"><span>My Stuff</span></a></li><li class="link right account-nav"><div class="account-nav"><a class="ignore-react-onclickoutside user-info" href="#"><img class="avatar" alt="" src="//cdn2.scratch.mit.edu/get_image/user/4755911_32x32.png"><span class="profile-name">mattsmithdw2</span></a><ul class="dropdown production"><li><a href="/users/mattsmithdw2/"><span>Profile</span></a></li><li><a href="/mystuff/"><span>My Stuff</span></a></li><li><a href="/accounts/settings/"><span>Account settings</span></a></li><li class="divider"><a href="#"><span>Sign out</span></a></li></ul></div></li></ul></div></div> "";

Answer 1

Use backticks instead of qoutes `Backticks allow ", ' and even new lines in JavaScript`

 document.getElementById("navigation").innerHTML = `<div class="" id="navigation"> <div class="inner logged-in"> <ul> <li class="logo"> <a aria-label="Scratch" href="/"></a> </li> <li class="link create"><a href="/projects/editor/"><span>Create</span></a></li> <li class="link explore"><a href="/explore/projects/all"><span>Explore</span></a></li> <li class="link discuss"><a href="/discuss"><span>Discuss</span></a></li> <li class="link ideas"><a href="/ideas"><span>Ideas</span></a></li> <li class="link about"><a href="/about"><span>About</span></a></li> <li class="search"> <form class="form" novalidate=""> <button class="button btn-search" type="submit"></button> <div class="form-group row no-label"> <label class="control-label col-sm-3" data-required="false" for="frc-q-1088"></label> <div class="col-sm-9"> <input type="text" class="input" aria-label="Search" name="q" placeholder="Search" id="frc-q-1088" value=""><span class="help-block">Not Required</span></div> </div> </form> </li> <li class="link right messages"><a href="/messages/" title="Messages"><span class="message-count">0 </span><span>Messages</span></a></li> <li class="link right mystuff"><a href="/mystuff/" title="My Stuff"><span>My Stuff</span></a></li> <li class="link right account-nav"> <div class="account-nav"> <a class="ignore-react-onclickoutside user-info" href="#"><img class="avatar" alt="" src="//cdn2.scratch.mit.edu/get_image/user/4755911_32x32.png"><span class="profile-name">mattsmithdw2</span></a> <ul class="dropdown production"> <li><a href="/users/mattsmithdw2/"><span>Profile</span></a></li> <li><a href="/mystuff/"><span>My Stuff</span></a></li> <li><a href="/accounts/settings/"><span>Account settings</span></a></li> <li class="divider"><a href="#"><span>Sign out</span></a></li> </ul> </div> </li> </ul> </div> </div>` 

 <div id="navigation"></div> 

Answer 2

I think this is kinda of a rule:

• if the string inside has ", use ' to wrap it.
• if the string inside has ', use " to wrap it.
• If it has both, choose one to wrap, and escape \\' or \\" instances of the wrapper inside.

So according to this rules, since it was many " inside, wrap it on '

document.getElementById("navigation").innerHTML = '<div class="" id="navigation"><div class="inner logged-in"><ul><li class="logo"><a aria-label="Scratch" href="/"></a></li><li class="link create"><a href="/projects/editor/"><span>Create</span></a></li><li class="link explore"><a href="/explore/projects/all"><span>Explore</span></a></li><li class="link discuss"><a href="/discuss"><span>Discuss</span></a></li><li class="link ideas"><a href="/ideas"><span>Ideas</span></a></li><li class="link about"><a href="/about"><span>About</span></a></li><li class="search"><form class="form" novalidate=""><button class="button btn-search" type="submit"></button><div class="form-group row no-label"><label class="control-label col-sm-3" data-required="false" for="frc-q-1088"></label><div class="col-sm-9"><input type="text" class="input" aria-label="Search" name="q" placeholder="Search" id="frc-q-1088" value=""><span class="help-block">Not Required</span></div></div></form></li><li class="link right messages"><a href="/messages/" title="Messages"><span class="message-count">0 </span><span>Messages</span></a></li><li class="link right mystuff"><a href="/mystuff/" title="My Stuff"><span>My Stuff</span></a></li><li class="link right account-nav"><div class="account-nav"><a class="ignore-react-onclickoutside user-info" href="#"><img class="avatar" alt="" src="//cdn2.scratch.mit.edu/get_image/user/4755911_32x32.png"><span class="profile-name">mattsmithdw2</span></a><ul class="dropdown production"><li><a href="/users/mattsmithdw2/"><span>Profile</span></a></li><li><a href="/mystuff/"><span>My Stuff</span></a></li><li><a href="/accounts/settings/"><span>Account settings</span></a></li><li class="divider"><a href="#"><span>Sign out</span></a></li></ul></div></li></ul></div></div>';

That should work.

Note: you may want to check on template literals (backtickes), which will allow you to have a more readable multiline string with interpolation. I'm not sure how support is on browsers.