Показать сообщение отдельно
  #5 (permalink)  
Старый 24.01.2018, 16:57
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Для начала процесса:
<style>
#base, #typic {
    width:250px;
    height:50px;
    border:3px solid grey;
    font-size:0px;
}
span {
    background-color:green;
    color:white;
   margin-left: .3em;
   font-size:15px;
}
</style>
<script>
window.onload = function() {
        var typical = [];
       [].forEach.call(document.querySelectorAll("#typic span"), function(el) {
           typical.push(el.textContent);
       });
   document.querySelector("#typic").onclick = function(e) {
         if(e.target.nodeName == "SPAN"){
             document.querySelector("#base").append(e.target);
         }
   }
   document.querySelector("#base").onclick = function(e) {
         if(e.target.nodeName == "SPAN"){
             if (typical.indexOf(e.target.textContent) >= 0 ) document.querySelector("#typic").append(e.target);
         }
   }
   document.querySelector("#appn").onclick = function() {
        var arr = document.querySelector("#app").value.split(";");
        for(var i = 0; i < arr.length;i++) {
            var el = document.createElement('span');
            el.textContent = arr[i];
            document.querySelector("#base").append(el);
        }
   }
   document.querySelector("#send").onclick = function() {
       alert(document.querySelector("#base").innerHTML);
   }
};
</script>
<div style="display:flex">
   <div id="base"><span>Рома</span><span>Денис</span></div>
   <div id="typic"><span>Иван</span><span>Семен</span><span>Петр</span></div>
</div>
<input type="text" id="app">
<button id="appn">Добавить теги</button><br>
<button id="send">Отправить</button>

Последний раз редактировалось Dilettante_Pro, 25.01.2018 в 11:11.
Ответить с цитированием