自動生成html代碼

我不知道如何框架標題，希望你們能理解我的問題。我正在尋找一些簡單的替代方法，而不是手動替換橫幅HTML代碼中的文本。自動生成html代碼

對於例 - 下面的代碼

<a class="fragment" href="https://applink" target="_blank"> 
 
    <div> 
 
    <img class="imgbor" src ="https://static.geenapp.com/appromo/1250-100.png" alt="some description"/> 
 
    <span class="styleraise">App Name</span><span class="styleraise1">Price 0.99$</span> 
 
    <div class="textpara"> 
 
     
 
App description</div> 
 
</div> 
 
</a>

我期待這樣的事情時，我填寫了一些文字（我在Photoshop中創建的這個）

所以在框中，它改變了HTML代碼。我需要創建100個這樣的橫幅，這樣很容易。也許任何在線服務或腳本可以幫助我實現這一目標。

來源

2016-09-20 user6176114

您需要首先嚐試的東西，然後問一個具體問題。否則，這將被視爲offtopic，應該被關閉。閱讀http://stackoverflow.com/help/how-to-ask和http://stackoverflow.com/help/mcve –

下面是簡單的HTML表單，它反應在每個輸入改變，併產生您所需的HTML：

$(function() { 
 
\t $("input[type=text]").on("input", function() { 
 
    \t var app = $("[name=app]").val(); 
 
    var desc = $("[name=desc]").val(); 
 
    var imglink = $("[name=imglink]").val(); 
 
    var applink = $("[name=applink]").val(); 
 
    var price = $("[name=price]").val(); 
 
    $("#output").get(0).innerHTML = $('<div/>').text('<a class="fragment" href="' + applink + '" target="_blank"> \ 
 
     <div> \ 
 
      <img class="imgbor" src="' + imglink + '" alt="some description" /> \ 
 
      <span class="styleraise">' + app + '</span> \ 
 
      <span class="styleraise1">' + price + '</span> \ 
 
      <div class="textpara">' + desc + '</div> \ 
 
     </div> \ 
 
     </a>').html(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
App name<br> 
 
<input name="app" type="text"/><br> 
 

 
App description<br> 
 
<input name="desc" type="text"/><br> 
 

 
Image link<br> 
 
<input name="imglink" type="text"/><br> 
 

 
App link<br> 
 
<input name="applink" type="text"/><br> 
 

 
Price<br> 
 
<input name="price" type="text"/><br> 
 

 
<code id="output"></code>

來源

2016-09-20 09:02:52 xxxmatko

很好的答案。如果OP有選擇，情況會好得多。使用模板文字是更乾淨的代碼，但古代瀏覽器將不被支持或OP可以使用您創建的樣式。 –

我建議你建立一個小的Web應用程序在後臺這個小工具： https://docs.python.org/2/library/htmlparser.html

基本上，你想要做的是相應地更新所需的值，然後將文件流保存到新文件。（您可以添加增量ID，這樣你會得到「文件1.HTML」，「文件2.HTML」等）

來源

2016-09-20 08:50:03

但確定有很多其他的選擇暗示模板系統。最近我不得不用一個XML文件執行類似的任務，我在NodejS後端（使用python）（這個解析器）[https://docs.python.org/2/library/xml.etree.elementtree.html]作爲一種「CGI」）和前端的ReactJS。但是你可以按照你的意願去做。 –

最新情況： JSFiddle

這是一個React的巨大用例！訪問他們的docs並按照沿tutorial

反應過來的時候，你要創造數千個類似尋找組件特別有效。

例如，您的代碼看起來像這樣 -

class Fragment extends React.Component { 
    render() { 
    return (
     <a class="fragment" href="https://applink" target="_blank"> 
     <div> 
      <img class="imgbor" src={this.props.src} alt="some description" /> 
      <span class="styleraise">App Name</span> 
      <span class="styleraise1">Price 0.99$</span> 
      <div class="textpara">App description</div> 
     </div> 
     </a> 
    ); 
    } 
}

您可以在父組件中重複該組件多次，只要您想要。 React對於可重用性非常好。

來源

2016-09-20 08:53:31 Mihir

自動生成html代碼

回答

相關問題