Advertisement
lemansky

Untitled

Mar 25th, 2021
669
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.68 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/bootstrap@4.5.3/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.getElementsByClassName('btn')[0];
  13.             _btn.addEventListener('click', (e) => {
  14.                 let _input = document.getElementsByClassName('form-control')[0];
  15.                 console.log(_input.value);
  16.                 let _links = document.getElementsByClassName('list-group-item')[_input.value-1];
  17.                 // _links.innerHTML += '<img src="https://placehold.it/50x50">';
  18.                 let _img = document.createElement('img');
  19.                 _img.src =  "https://placehold.it/50x50";
  20.                 // _links.appendChild(_img);
  21.                 _links.parentNode.insertBefore(_img, _links.nextElementSibling);
  22.             });
  23.  
  24.         });
  25.         const clean = (node) =>
  26.         {
  27.           for(var n = 0; n < node.childNodes.length; n ++)
  28.          {
  29.            var child = node.childNodes[n];
  30.            if
  31.            (
  32.              child.nodeType === 8
  33.              ||
  34.              (child.nodeType === 3 && !/\S/.test(child.nodeValue))
  35.            )
  36.            {
  37.              node.removeChild(child);
  38.              n --;
  39.            }
  40.            else if(child.nodeType === 1)
  41.            {
  42.              clean(child);
  43.            }
  44.          }
  45.        }
  46.     </script>
  47.     <style>
  48.  
  49.     </style>
  50. </head>
  51. <body>
  52.     <div class="container" style="margin-top:20px;margin-bottom:20px">
  53.         <div class="col-lg-6 col-md-6">
  54.             <input type="text" class="form-control" id="input" placeholder="въведете, позиция на която да се вмъкне изображение">
  55.             <input type="button" class="btn btn-success add" id="add" value="Вмъкни">
  56.             <ul class="list-group table-of-contents" style="margin-top:20px;">
  57.               <a class="list-group-item" href="#navbar">Navbar </a>
  58.               <a class="list-group-item bg-info text-white" href="#buttons">Buttons </a>
  59.               <a class="list-group-item bg-warning text-white" href="#typography">Typography </a>
  60.               <a class="list-group-item" href="#tables">Tables </a>
  61.               <a class="list-group-item bg-danger text-white" href="#forms">Forms </a>
  62.  
  63.             </ul>
  64.         </div>
  65.  
  66. </body>
  67. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement