внутренний HTML отображается иначе, чем ожидалось - PullRequest
Новая
       3

внутренний HTML отображается иначе, чем ожидалось

0 голосов
/ 16 июня 2020 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   </head>
   <body>
      <ul>
         <li id=1 class="draggable" draggable="true">
            <div class="input-group" >
               <p draggable="false" style="width:400px; outline: none" >Text</p>
               <button onclick="testFunction(this)">update</button>
            </div>
         </li>
      </ul>
      <button onclick="myFunction()">Try it</button>
      <p id="demo"></p>
      <script>
         function myFunction() {
           document.getElementById("demo").innerHTML = document.getElementById(1).innerHTML;
         }
         function testFunction(el) {
           var attr = document.createAttribute('contenteditable');
           attr.value = 'true';
           el.parentNode.firstElementChild.setAttributeNode(attr)
           el.parentNode.firstElementChild.focus()
         }
      </script>
   </body>
</html>

При нажатии кнопки «обновить» и добавлении нового текста и строк в абзац и нажатии кнопки «Попробовать» новая строка идет. Я ожидал, что будет то же самое, так как скопировал внутренний HTML.

Ответы [ 3 ]

2 голосов
/ 16 июня 2020

При создании элемента HTML и присвоении ему идентификатора идентификатор должен быть в кавычках, а также должен содержать как минимум 1 символ и без пробелов , поэтому я предложите изменить id элемента li с id=1 на id="1a" (или что-то с буквой в нем), а document.getElementById("1a").innerHTML следует изменить на это новое значение (в данном случае «1a ")

0 голосов
/ 16 июня 2020

Хорошо, так что короткая запись id = 1 или id = '1' не вызывает никаких проблем. Он все еще набирает HTML и работает нормально. Проблема заключается в теге p, когда вы помещаете что-то в тег P, он начинает вести себя по-другому, а тег разрыва (BR) не показывает разрывы строк. Я изменил P на Div, и теперь он выглядит нормально. Я изменил / удалил класс CSS также .input-group {position: relative; дисплей: -ms-flexbox; / * display: flex; Теперь вы можете видеть разрывы строк. 

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   </head>
   <body>
      <ul>
         <li id="1" class="draggable" draggable="true">
            <div  >
               <p id='editable' draggable="false" style="width:400px; outline: none" >Text</p>
               
            </div>
         </li>
      </ul>
<button onclick="testFunction('editable')">update</button>
      <button onclick="myFunction()">Try it</button>
      <div id="demo"></div>
      <script>
         function myFunction() {
           document.getElementById("demo").innerHTML = document.getElementById(1).innerHTML;
         }
         function testFunction(el1) {
          el= document.getElementById(el1);
           var attr = document.createAttribute('contenteditable');
           attr.value = 'true';
           el.parentNode.firstElementChild.setAttributeNode(attr)
           el.parentNode.firstElementChild.focus()
         }
      </script>
   </body>
</html>
0 голосов
/ 16 июня 2020

Если вы ожидаете, что строка будет выглядеть как маркированный список, то вам нужно поместить результат innerHTML в неупорядоченный список. Прямо сейчас вы помещаете его в абзац.

Попробуйте изменить <p id="demo"></p> на: 

<ul>
  <li id="demo"></li>
</ul>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...