如何将大型HTML代码转换成字符串以在.innerHTML中使用

Question

我试图快速修改网站。 我复制了代码并做了一个快速检查元素，然后编辑了HTML以得到我想要的东西。 我想知道如何将这段代码粘贴到字符串中...它具有所有用于在其中区分字符串的符号...我是否必须通过重新创建每个字符串来做很长的路要走？与createElement的元素？ 谢谢。

我尝试将其粘贴到.innerHTML中，但是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> "";

Answer 1

使用反引号而不是qoutes， `Backticks allow ", ' and even new lines in JavaScript`反引号`Backticks allow ", ' and even new lines in JavaScript`的换行符`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

我认为这有点规则：

• 如果其中的字符串包含“，请使用'对其进行换行。
• 如果其中的字符串包含'，请使用“进行包装。
• 如果两者都包含，请选择一个要包装的包装，然后在其中转义包装的\\'或\\“实例。

因此，根据此规则，由于里面有很多“，请将其包装在'

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>';

那应该工作。

注意：您可能需要检查模板文字（反引号），这将使您可以更容易地读取带有插值的多行字符串。 我不确定浏览器如何支持。