将HTML代码放入变量中，以便于查看和编辑它

Put HTML code inside a variable with the ability to easily view and edit it

本文关键字：于查看 编辑 代码 HTML 变量      更新时间：2023-09-26

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

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

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

我想到的另一个选项，这似乎是一个很好的一个，是只是复制HTML在jQuery和复制到另一个DIV。

这行不通。我对第三方解决方案持开放态度，而不仅仅是母语解决方案。谢谢。

假设您有以下标记:

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

你可以很容易地添加到HTML元素使用jquery(我认为这是你的后):

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/

如果你想制作多行字符串，请参见:使用jQuery插入多行字符串

一些想法

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

相关文章：