自动生成HTML代码

Question

我不确定如何构建标题，希望你们能理解我的问题。我正在寻找一些简单的替代方案，而不是手动替换横幅的HTML代码中的文本。

例如 - 这里是代码

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我正在寻找这样的东西（我在photoshop中创建了这个）

因此，只要我在框中填写一些文本，它就会在HTML代码中发生变化。我需要创建100个这样的横幅，这样很容易。 也许任何可以帮助我实现这一目标的在线服务或脚本。

Answer 1

这是一个简单的HTML表单，它对每个输入的变化作出反应并生成所需的html：

$(function() {
	$("input[type=text]").on("input", function() {
  	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>

Answer 2

我建议您在后端使用这个小工具构建一个小型Web应用程序： https://docs.python.org/2/library/htmlparser.html

基本上，您要做的是相应地更新所需值，然后将文件流保存到新文件中。 （您可以附加增量ID，执行此操作即可获得＆＃34; file-1.html＆＃34;，＆＃34; file-2.html＆＃34;依此类推）

Answer 3

<强> UPDATE - JSFiddle

这是React的一个很好的用例！访问他们的docs并按照tutorial

进行操作

当您想要创建数千个类似的组件时，React特别有效。

例如你的代码看起来像这样 -

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非常适合可重用性。