用JavaScript編寫HTML

Question

我的HTML中有這個div，我想動態添加它，但是我認為JavaScript字符串中有很多HTML，還有其他更好的方法嗎？

如果有人知道一些技巧，我正在用MVC編程

我的HTML

<div class="container">
    <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
        <div class="panel-heading">Random1 - Random2</div>
        <div class="panel-body">
            <div>Random3</div>
        </div>
    </div>
</div>

我的jQuery

$('#mybtn').click(function () {
    $('#mydiv').append('<div class="container"><div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel"><div class="panel-heading">Random1 - Random2</div><div class="panel-body"><div>Random3</div></div></div></div>');
});

Answer 1

您可以創建一個可以在需要時讀取的模板。 通過使用類型為"text/template" script 。

這是一個例子。

  $(document).ready(function() { $('button').click(function() { $('#mydiv').append($('#templateId').html()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>button</button> <div id="mydiv">mydiv</div> <script type="text/template" id="templateId"> <div class="container"> <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel"> <div class="panel-heading">Random1 - Random2</div> <div class="panel-body"> <div>Random3</div> </div> </div> </div> </div> </script> 

Answer 2

通常，混合興趣（HTML，JS，CSS）不是最好的主意。 將其分開並使用模板引擎。 但是，您當然可以將HTML放入Javascript文件中，我會對其進行正確格式化。

var myTMPL = '<div class="container">' +
                  '<div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">' +
                       '<div class="panel-heading">Random1 - Random2</div>' +
                       '<div class="panel-body">' +
                           '<div>Random3</div>' +
                       '</div>' +
                  '</div>' +
             '</div>';

然后像

$('#mydiv').append( myTMPL ); 

Answer 3

您可以嘗試將html作為頁面上的隱藏元素並將其插入。 整理一下：

<div id="myOtherDiv" style="display: none;">
    <div class="container">
        ....... rest of html
    </div>
</div>

腳本：

$('#mybtn').click(function () {
    $('#mydiv').append($("#myOtherDiv").html());
});

Answer 4

這樣的事情：1.將所有html添加到一個新的div中，命名為addingtext：

  <div name="addingtext">
     <div class="container">
        <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
        <div class="panel-heading">Random1 - Random2</div>
        <div class="panel-body">
            <div>Random3</div>
       </div>
     </div>
    </div>
  </div>

2.獲取您的div的所有內部HTML（源代碼），名稱為addingtext：

 var stringtoadd = document.getElementsByName("addingtext").innerHTML;

然后

 $('#mydiv').append(stringtoadd);

Answer 5

您可以在/* comment */內的Javascript函數中編寫HTML代碼，然后將該函數轉換為使用functionname.toString（）方法的文本，並在“ /* ”和“ */ ”之間解析文本，該文本在所有舊瀏覽器中均適用。 例：

function myfunc()
{/*

<div class="container">
        <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
            <div class="panel-heading">Random1 - Random2</div>
            <div class="panel-body">
                <div>Random3</div>
            </div>
        </div>
    </div>

*/}

function getLines(func)
{
var myhtml = func.toString();
var htmlstart = myhtml.indexOf('/*');
var htmlend = myhtml.lastIndexOf('*/');
return myhtml.substr(htmlstart+2, htmlend-htmlstart-2);
}

$('#mybtn').click(function () {
    $('#mydiv').append( getLines(myfunc) );
});

這個簡單的技巧還可以用於通過JSONP發送XML，HTML或純文本。

Answer 6

如果您知道angular.js，則可以為要添加/替換的文本創建一個單獨的html文件，而不是通過javascript替換所有文本，而只需創建<div ng-include="'html-with-text.html'"></div>和javascript。

Answer 7

有很多方法可以做到（這里提供的所有答案都很好）。 但是您需要選擇一種有效的方法來做到這一點。 我還在學習JS。 因此，我真的無法幫助您選擇有效的方法。 但是您也可以嘗試這種方法。

代替append（），您還可以使用load（）（ 引用load（）api ）

主要的HTML代碼：-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>button</button>
<div id="myDiv">mydiv</div>
<div id = "addHere"> </div>

您要添加的HTML（假設此HTML的標題為addon.html）：-

<div class="container">
    <div class="panel panel-info col-lg-10 col-lg-offset-1 added-panel">
    <div class="panel-heading">Random1 - Random2</div>
    <div class="panel-body">
        <div>Random3</div>
   </div>
 </div>
</div>

最后，你的JS

$('#mybtn').click(function () {
    $('#addHere').load('/addon.html');
});

這會將您的插件HTML放在div之后。