user6176114 user6176114 - 1 year ago 63
CSS Question

Automatically generate html code

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">
<img class="imgbor" src ="" alt="some description"/>
<span class="styleraise">App Name</span><span class="styleraise1">Price 0.99$</span>
<div class="textpara">

App description</div>

I am looking for something like this (I have created this in photoshop)
enter image description here

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.

Answer Source

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> \
<script src=""></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>

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

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