将HTML代码放在变量中，并能够轻松查看和编辑它

Question

是否可以选择将整个HTML代码附加到变量而不使用加操作数，每行都在新行中或不使用push into数组。

我希望能够使用新行复制粘贴单引号之间的代码，以便更容易编辑。我的第一个想法是将代码复制到外部文件中，但我不确定如何以一种可以工作的方式检索它。

var html = '<div>
              <div>
                some text
              </div>
           </div>';

我想到的另一个看起来很好的选择是在jQuery中复制HTML并将其复制到另一个DIV中。

这不起作用。我对第三方解决方案持开放态度，而不仅仅是母语解决方案。感谢。

Answer 1

您可以使用jquery轻松附加到HTML元素（我认为这是您的追求）：

HTML：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

JS：

$( ".inner" ).append( "<p>Test</p>" );

变为：

<h2>Greetings</h2>
<div class="container">
  <div class="inner">
    Hello
    <p>Test</p>
  </div>
  <div class="inner">
    Goodbye
    <p>Test</p>
  </div>
</div>

请参阅：http://api.jquery.com/append/

如果您想制作多行字符串，请参阅：Multi-line string insert using jQuery

Answer 2

假设您有以下标记：

<div id="intro">
    <h2>Hello</h2>
</div>
<p>I am a paragraph, and want to be placed inside intro.</p>

然后，您可以使用jQuery的appendTo来复制p的html，并将其粘贴到#intro

中

$(function(){
    $('p').appendTo('#intro');
});

Answer 3

一些想法

\n\新行分隔符

var html = '<div>          \n\
              <div>        \n\
                some text  \n\
              </div>       \n\ 
           </div>';

可以在任何更好的文本编辑器中使用多行编辑轻松插入\n\。

使用隐藏元素

<div id="hidden_1">
    <div>
      <div>
        some text
      </div>
    </div>
</div>

[id^=hidden_]{ display:none; } // CSS for any ID that starts with "hidden_"

var html = $('#hidden_1').html();