Advertisement
lemansky

Untitled

Nov 13th, 2020
914
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.70 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  7.     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  8.     <script>
  9.         document.addEventListener('DOMContentLoaded', function(event){
  10.             clean(document.body);
  11.  
  12.             let _btn = document.getElementById("add");
  13.             _btn.addEventListener("click", function(){
  14.                 let _input = document.getElementById("input");
  15.                 let _value = parseInt(_input.value);
  16.                
  17.                 let _list = document.getElementsByClassName("list-group-item");
  18.                 let _old = _list[_value-1].innerHTML;
  19.                 _list[_value-1].innerHTML = _old + ' <img src="https://placehold.it/50x50">';
  20.                 // let _img = document.createElement('img');
  21.                 // _img.src = 'https://placehold.it/50x50';
  22.                 // _list[_value-1].appendChild(_img);
  23.             });
  24.  
  25.         });
  26.         const clean = (node) =>
  27.         {
  28.           for(var n = 0; n < node.childNodes.length; n ++)
  29.          {
  30.            var child = node.childNodes[n];
  31.            if
  32.            (
  33.              child.nodeType === 8
  34.              ||
  35.              (child.nodeType === 3 && !/\S/.test(child.nodeValue))
  36.            )
  37.            {
  38.              node.removeChild(child);
  39.              n --;
  40.            }
  41.            else if(child.nodeType === 1)
  42.            {
  43.              clean(child);
  44.            }
  45.          }
  46.        }
  47.     </script>
  48.  
  49. </head>
  50. <body>
  51.     <div class="container" style="margin-top:20px;margin-bottom:20px">
  52.         <div class="col-lg-6 col-md-6">
  53.             <input type="text" class="form-control" id="input" placeholder="въведете, позиция на която да се вмъкне изображение">
  54.             <input type="button" class="btn btn-success add" id="add" value="Вмъкни">
  55.             <ul class="list-group table-of-contents" style="margin-top:20px;">
  56.               <a class="list-group-item" href="#navbar">Navbar </a>
  57.               <a class="list-group-item bg-info text-white" href="#buttons">
  58.                   Buttons
  59.                  
  60.               </a>
  61.               <a class="list-group-item bg-warning text-white" href="#typography">Typography </a>
  62.               <a class="list-group-item" href="#tables">Tables </a>
  63.               <a class="list-group-item bg-danger text-white" href="#forms">Forms </a>
  64.         </ul>
  65.         </div>
  66. </body>
  67. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement