Automatically generate html code

Question

I am not sure how to frame the title, hope you guys will understand my question. I am looking for something easy alternative instead of manually replacing text in the HTML code of a banner.

For example- Here's the code

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

I am looking for something like this (I have created this in photoshop)

So whenever I fill some text in the boxes, it changes in the HTML code. I need to create 100's of these banners and it would be a lot easy this way. Maybe any online service or script that could help me in achieving this.

You need to try something first and then ask for a specific problem. Otherwise this will be treated as offtopic and should be closed. Read stackoverflow.com/help/how-to-ask and stackoverflow.com/help/mcve — Marcos Pérez Gude
– Marcos Pérez Gude, Commented Sep 20, 2016 at 8:48

xxxmatko · Accepted Answer · 2016-09-20 09:02:52Z

1

Here is simple HTML form, which reacts to change in each input and generates your desired 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>

answered Sep 20, 2016 at 9:02

xxxmatko

4,1522 gold badges20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hdotluna Over a year ago

Nice answer. It would be much better if OP have option. Using Template Literals which is cleaner code but ancient browsers will not be supported or OP can just use the style you create.

Alberto Schiabel · Accepted Answer · 2016-09-20 08:50:03Z

0

I suggest you to build a little web app with this tiny tool in the backend: https://docs.python.org/2/library/htmlparser.html

Basically, what you'd want to do is updating the wanted values accordingly and then save the file stream to a new file. (You can append an incremental id, doing this you'll get "file-1.html", "file-2.html" and so on)

answered Sep 20, 2016 at 8:50

Alberto Schiabel

1,15913 silver badges27 bronze badges

1 Comment

Alberto Schiabel Over a year ago

But sure there are many other alternatives which imply a templating system. Recently I had to perform a similar task with an XML file, I used (this parser)[docs.python.org/2/library/xml.etree.elementtree.html] in a NodejS backend (using python as sort of a "CGI") and ReactJS on frontend. But you may do this as you want.

Mihir · Accepted Answer · 2016-09-20 08:53:31Z

UPDATE- JSFiddle

this is a great use-case for React! Visit their docs and follow along the tutorial

React is especially effective when you want to create thousands of similar looking Components.

For e.g. your code would look like this-

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

You can repeat this component in a parent component for as many times as you want. React is great for reusability.

Collectives™ on Stack Overflow

Automatically generate html code

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related