html A A YYUS的一支笔。

Posted 2021-05-11

;(function() {
  // simulates AJAX request
  var data = [
    {
      title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5",
      href: "http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/",
      imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg"
    },
    {
      title: "Nettuts+ Quiz #8",
      href: "http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/",
      imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg"
    },
    {
      title: "WordPress Plugin Development Essentials",
      href: "http://net.tutsplus.com/tutorials/wordpress/wordpress-plugin-development-essentials/",
      imgSrc: "https://d2o0t5hpnwv4c1.cloudfront.net/1101_wpPlugins/wpplugincourse.png"
    }    
  ],
      template = document.querySelector('#template').innerHTML,
      result = document.querySelector('.result'),
      i = 0, len = data.length, 
      fragment = '';
   
  for ( ; i < len; i++ ) {
    fragment += template
      .replace( /\{\{title\}\}/, data[i].title )
      .replace( /\{\{href\}\}/, data[i].href )
      .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );  
  }
 
  result.innerHTML = fragment;
})();

oeuzF
-----


A [Pen](http://codepen.io/anon/pen/oeuzF) by [Anonasaurus Rex](http://codepen.io/anon) on [CodePen](http://codepen.io/).

[License](http://codepen.io/anon/pen/oeuzF/license).

<div class="result"></div>
   
  <script type="template" id="template">
    <h2> 
      <a href="{{href}}">
        {{title}} 
      </a>
    </h2>
    <img src="{{imgSrc}}" alt="{{title}}">
  </script>