innerHTML 显示与预期不同答案

【问题标题】：innerHTML displaying differently then expectedinnerHTML 显示与预期不同
【发布时间】：2020-10-05 13:36:45
【问题描述】：

<!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>

当按下“更新”按钮并向段落添加新文本和行并按下“尝试”按钮时，新行就会消失。我希望它是一样的，因为我复制了 innerHTML。

【问题讨论】：

document.getElementById(1) 不是你想要的。 HTML 元素 id 值是字符串。使用document.getElementById('1')，但您应该始终使用以字母而非数字开头的元素id值。
另外，您应该避免使用.innerHTML，因为它是一项昂贵的操作（因为这意味着文本必须由浏览器解析和处理）。改用parent.appendChild( other.cloneNode() ) 会快得多（而且更简单，imo），请参阅developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
这能回答你的问题吗？ how to add new <li> to <ul> onclick with javascript

标签： javascript html css dom

【解决方案1】：

在制作 HTML 元素并为其赋予 id 时，id 必须在引号中，并且它还必须包含 至少 1 个字符 并且 没有空格，所以我建议将 li 元素的 id 从 id=1 更改为 id="1a"（或其中包含字母的内容），并且 document.getElementById("1a").innerHTML 应更改为该新值（在这种情况下，“ 1a")

【讨论】：

【解决方案2】：

如果您希望该行看起来像一个项目符号列表，那么您需要将innerHTML 的结果放在一个无序列表中。现在你把它放在一个段落中。

考虑将<p id="demo"></p> 更改为：

<ul>
  <li id="demo"></li>
</ul>

【讨论】：

【解决方案3】：

好的，所以长话短说 id=1 或 id ='1' 不会引起任何问题。它仍在抓取 HTML 并且工作正常。问题出在 p 标签上，当您将某些内容放入 P 标签时，它的行为开始有所不同，并且（BR）break 标签没有显示换行符。我将 P 更改为 Div，现在看起来很好。我也更改/删除了 CSS 类 .输入组 { 位置：相对；显示：-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>

【讨论】：