Автоматически генерировать html-код

Question

Я не уверен, как создать заголовок, надеюсь, вы, ребята, поймете мой вопрос. Я ищу что-то легкую альтернативу вместо ручной замены текста в 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>

Я ищу что-то вроде этого (я создал это в фотошопе)

Поэтому, когда я заполняю текст в блоках он изменяется в HTML-коде. Мне нужно создать 100-е из этих баннеров, и это было бы очень легко. Возможно, любой онлайн-сервис или скрипт, который мог бы помочь мне в достижении этого.

Answer 1

Вот простая форма 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>

Answer 2

Я предлагаю вам построить небольшой веб-приложение с этим крошечным инструментом в интерфейсе: https://docs.python.org/2/library/htmlparser.html

В принципе, то, что вы хотите сделать, это обновление, чтобы значения соответственно, а затем сохранить поток файла к новый файл. (Вы можете добавить инкрементный идентификатор, делая это, вы получите "файл-1.html", "файл-2.html" и так далее)

Answer 3

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

Вы можете повторить этот компонент в родительском компоненте столько раз, сколько хотите. Реакция отлично подходит для повторного использования.