Front-end JS common string processing instances

1. String processing is often used in processing server callback data, dynamic splicing generated HTML, etc., is the front-end interview required questions.
2. I think the string processing of this commonly used, must be clear in the heart, or use the time to hurry to turn the manual fee for half a day.

into the topic, first of all, we will meet a few needs, the next step to solve it:Demand 1: Dynamically add elements to list <ul> "difficulty: 1" based on JSON data returned by the server

Usage scenarios: Waterfall drop-down refresh, lazy load, Ajax Click to load list

The HTML template is like this:

<ul class= "Icon_list" >            <li><a href= "#" ></a>                <p>360 Antivirus </p>                <p>10.00M</p>                <a href= "" > Download </a></li>            <li ><a href= "#" ></a>                <p> software Butler </p>                <p> 10.00m</p>                <a href= "" > Downloads </a></li>
</ul>

JSON is like this:

{softlist:[{"Name": "360 Antivirus", "Size": "10.00M", "png_src": "/floor1-1.png", "href": "www.baidu.com"},    {"Name": "Software Steward", "Size": "12.00M", "png_src": "/floor1-2.png", "href": "www.baidu.com"},    {"Name": "360 Browser", "Size": "14.00M", "png_src": "/floor1-3.png", "href": "www.baidu.com"},    {"Name": "360 Mall", "size": "10.20M", "png_src": "/floor1-4.png", "href": "www.baidu.com"},    {"Name": "Movie Encyclopedia", "size": "11.00M", "png_src": "/floor1-5.png", "href": "www.baidu.com"},    {"Name": "Universal Power saving", "Size": "13.00M", "png_src": "/floor1-6.png", "href": "www.baidu.com"},    {"Name": "360wifi", "Size": "25.10M", "png_src": "/floor1-7.png", "href": "www.baidu.com"},    {"Name": "360ROOT", "Size": "10.90M", "png_src": "/floor1-8.png", "href": "www.baidu.com"},]}

The result is this:

Solution: The dynamic generation of the various <li> stitching into a string, appended to the parent node innerHTML inside

The following is a direct-running page code (the code that is too long in this article will be collapsed by default):

<! DOCTYPE html>/*hyperlink to underline*/a {display:block;            Overflow:hidden;            Outline:none; Text-Decoration:none;            Color:black; Font-family: "Microsoft yahei UI"; Color: #333; }        /*Li, remove the dot.*/li {List-style-Type:none; Text-Align:center; }. Floor H2 {font-size:1. 6em; Margin-top:10px; Margin-left:4%; Color: #333333; }        /*Responsive layout Core CSS*/. Floor. icon_list{min-width:320px;            Display:flex; Flex-Direction:row; Flex-Wrap:wrap; Justify-content:flex-start; }. Floor. icon_list Li {width:25%; Margin-bottom:15px; }. Floor. icon_list li img {width:60%;            }. Floor. icon_list Li p {margin:4px; Font-size:15px;        Color: #33333f; }. Floor. icon_list Li P:nth-child (3{color: #ccc; Font-size:14px; }. Floor. icon_list Li A:last-Child {margin:5px Auto0; Width:66%;            height:25px;            Border:none; Line-height:27px; Border-radius:18px;            Background: #def3e1; Font-size:14px;        Color: #23ac38; }    </style>//JSON can be loaded via Ajax    varJSON ={softlist: [{"Name": "360 Antivirus", "Size": "10.00M", "png_src": "/floor1-1.png", "href": "www.baidu.com"},            {"Name": "Software Steward", "Size": "12.00M", "png_src": "/floor1-2.png", "href": "www.baidu.com"},            {"Name": "360 Browser", "Size": "14.00M", "png_src": "/floor1-3.png", "href": "www.baidu.com"},            {"Name": "360 Mall", "size": "10.20M", "png_src": "/floor1-4.png", "href": "www.baidu.com"},            {"Name": "Movie Encyclopedia", "size": "11.00M", "png_src": "/floor1-5.png", "href": "www.baidu.com"},            {"Name": "Universal Power saving", "Size": "13.00M", "png_src": "/floor1-6.png", "href": "www.baidu.com"},            {"Name": "360wifi", "Size": "25.10M", "png_src": "/floor1-7.png", "href": "www.baidu.com"},            {"Name": "360ROOT", "Size": "10.90M", "png_src": "/floor1-8.png", "href": "www.baidu.com"},        ]    }    //dynamically add ' list elements ' at the phone software    functionaddsoftlist (softlist) {//A To use getElementById, if using getelementsbyclassname note to add [0]        varA = document.getElementById (' softlist '); //var a = document.getelementsbyclassname (' icon_list ') [0];        varstr = "; //the format of an Li        /*<li><a href= "#" ></a> <p>360 Antivirus </p> <p>10.00M</p> <a href= "" > Downloads </a></li>*/         for(varIinchsoftlist) {STR+ = ' <li><a href= "#" ></a> ' + ' <                    P> ' + softlist[i].name + ' </p> ' + ' <p> ' + softlist[i].size + ' </p> ' + ' <a href= ' + softlist[i].href + ' "> Downloads </a></li> '; }        //Append ElementA.innerhtml + =str;    }; //this invokesaddsoftlist (json.softlist);</script>Unwind Code
A flex -responsive layout is also made, which automatically adapts to the page size regardless of the size of the page.
Don't understand what a flex-responsive layout can see http://www.cnblogs.com/chris-oil/p/5831028.html
11.5 not yet adjourned.
Front-end JS common string processing instances